elementUI el-table中的selection实现单选+全选框换成文字

1、首先我们把全选框换成自己想要的文字：这里有使用header-cell-class-name属性给表头添加自定义class，

 
<el-table
   height="100%"
   ref="tables"
   v-loading="dataLoading"
   :data="dataList"
   @select="handleRow"
   :header-cell-class-name="cellClass"
   border
   stripe
>
               
// 设置表头的class
        cellClass (row) {
            if (row.columnIndex === 0) {
                return 'disabledSelection';
            }
        },

<style>

.el-table /deep/.disabledSelection .cell .el-checkbox__inner{
    display: none;
    position: relative;
}
.el-table /deep/.disabledSelection .cell::before{
    content: '选择';
    position: absolute;
    left: 10px;
}
</style>


// 如果不想添加自定义样式，觉得上面太过复杂可以直接设置样式，但是这样要注意不能影响其他的样式
// 方法二：
thead {
    .el-table-column--selection {
      .cell {
        display: none;
      }
    }
  }

2、实现单选，每次选择当前的，其他的选择需要取消，使用el-table的方法：  @select="handleRow"；

 handleRow (selection, row) {
    console.log(selection, row, 1322);
    // 先清除所有选中的
    this.$refs.tables.clearSelection();
    // 当前的点击实现勾选
    this.$refs.tables.toggleRowSelection(row);
    this.tableList = [];
    this.getTableList(row);
},