el-table实现点击行单选并隐藏全选框

el-table实现点击行单选并隐藏全选框

效果如下

使用vue2结合element-ui实现，隐藏el-table自带的全选框，并实现当点击行时，自动勾选复选框
el-table官网介绍

template部分

<el-table
          ref="bsTableRef"
          v-loading="grid.loading"
          border
          stripe
          :data="tableData"
          :height="400"
          @selection-change="handleSelectionChange"
          @current-change="handleCurrentChange"
        >
        <el-table-column width="60" type="selection" align="center" />
      	<!-- 其余table-column -->
        </el-table>

关键点就在于设置两个自定义函数，以及设置某一列的type为selection

@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"

css部分

//使用的scss
::v-deep {
  .el-table__header .el-checkbox {
    display: none !important;
  }
}

这样即可隐藏el-table-column的selection默认自带的全选框

js部分

data(){
	//存储当前被选中的行
      activeRow: null
},
methods:{
	// 点击复选框选择行
    handleSelectionChange(val) {
      if (val.length > 1) {
      	//当多选时，先清空表格复选框选项，再选中最新选的
        this.$refs.bsTableRef.clearSelection()
        this.$refs.bsTableRef.toggleRowSelection(val[1])
        this.activeRow = val[1]
      } else if (val.length == 0) {
      //取消选择
        this.activeRow = null
      } else if (val.length == 1) {
      //只选了一行
        this.activeRow = val[0]
      }
    },
    //当前行变化时
    handleCurrentChange(row) {
    //点击某行时，也要对应设置复选框的选中状态
      this.activeRow = row
      this.$refs.bsTableRef.toggleRowSelection(row)
    },
}