vue elmentUI table表格使用多选框改为单选，表头多选框改成文字

1、在表格内使用selection选框

label-class-name 用于为特定的标签添加自定义样式 （定义一个类名，设置样式）

<el-table-column

     type="selection"

     width="50"

     align="center"

     label-class-name="DisabledMultiple"

 />    

此时效果： 

2、设置样式 去掉表头全选框，改为“选择”文字

<style scoped> 

/* 去掉全选按钮 */

::v-deep .cell.DisabledMultiple .el-checkbox__inner {

  display: none !important;

}

::v-deep .cell.DisabledMultiple::before {

  content: "选择";

  text-align: center;

  line-height: 37px;

}

 </style>

此时效果：

 3、设置选择事件，将多选设置为单选

 定义选框选择选中事件

 <el-table
   ref="multipleTable"
   height="600"
   :data="list"
   border
   :row-key="id"
   @selection-change="handleSelectionChange"
 >

handleSelectionChange(select, row) {
      console.log(select, 'select')
      let selectData = null
      if (select.length > 1) {
        // 清除所有勾选框
        this.$refs.multipleTable.clearSelection();
        //每选中第二个的时候删除数组最后一个（第一次选中的数据）
        selectData = select.pop();
        // 勾选当前选中的数据
        this.$refs.multipleTable.toggleRowSelection(selectData, true);
      } else {
        selectData = select[0]
        this.$refs.multipleTable.toggleRowSelection(selectData, true)
      }
    },