element：table 单选（不以事小而不为）

一、效果如图

二、实现步骤 

2.1、开启多选

<el-table-column
      type="selection"
      align="center"
      width="55">

2.2、隐藏多选框

.el-table__header .el-checkbox{ // 找到表头那一行，然后把里面的复选框隐藏掉
    display:none!important;
  }

2.3、select事件调用：

table通过el-table二次封装，本质还是el-table

 

 2.4、 实现单选

handleSelectionChange(selection,row) {
      // 清空所有选中
      this.$refs.singleTable.$refs.table.clearSelection()
      if (row) {
        // 确保更新
        this.$nextTick(() => {
          // 选中当前
          this.$refs.singleTable.$refs.table.toggleRowSelection(row, true)
        })
      }
      // 返回数据给父组件
      this.$emit('selection', row)
    },

2.5、 最终实现如文章开始图片效果

三、欢迎交流指正。

虽然很简单，但值得记录，不以事小而不为。

四、参考文档

Element - The world's most popular Vue UI framework