一、代码效果

二、 api 说明

来源：element.eleme.cn/#/zh-CN/com…

方法名	说明	参数
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	{row, column, rowIndex, columnIndex}
selection-change	当选择项发生变化时会触发该事件	selection
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
row-click	当某一行被点击时会触发该事件	row, column, event
clearSelection	用于多选表格，清空用户的选择	—
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected

三、代码

<template>
  <el-table ref="table" :data="tableData" height="100%" :header-cell-class-name="cellClass"
    @selection-change="handleSelectionChange" @select="handleSelect" @row-click="handleRowClick">
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      selectedData: [],
      isRadioMode: true // 是否为单选模式
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedData = val // 保存选定数据的数据
    },
    // 列表勾选框勾选
    handleSelect(selection, row) {
      if (!this.isRadioMode) return
      this.$refs['table'].clearSelection()
      if (selection.length != 0) {
        row.flag = true
        this.$refs['table'].toggleRowSelection(row, true)
      } else {
        row.flag = false
        this.$refs['table'].toggleRowSelection(row, false)
      }
    },
    // 行被点击
    handleRowClick(row) {
      const flag = !row.flag
      if (this.isRadioMode) {
        this.$refs['table'].clearSelection()
        this.tableData.forEach((v) => {
          v.flag = false
        })
      }
      row.flag = flag
      this.$refs['table'].toggleRowSelection(row, flag)
    },
    // 单选模式下隐藏全选勾选框
    cellClass(row) {
      if (this.isRadioMode && row.columnIndex === 0) {
        return 'hideCheckbox'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  ::v-deep {
    .hideCheckbox {
      pointer-events: none;

      .el-checkbox {
        display: none;
      }
    }
  }
}
</style>