elementui el-table多选换单选，并去掉表头复选框_去掉element ui e-table复选框

      <el-table v-loading="paperPage.listLoading" :data="paperPage.tableData"
                @selection-change="handleSelectionChange" border fit highlight-current-row style="width: 100%" ref="tb">
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column prop="id" label="Id" width="90px"/>
        <el-table-column prop="subjectId" label="科目" :formatter="subjectFormatter" width="120px"/>
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
      </el-table>
1
2
3
4
5
6
7
8

多选变单选，关键是ref=“xx”

    handleSelectionChange (val) {
      if (val.length > 1) {
        this.$refs.tb.clearSelection()
        this.$refs.tb.toggleRowSelection(val.pop())
      }
      this.paperPage.multipleSelection = val
    },
1
2
3
4
5
6
7

去掉表头复选框，规范每行最前面的复选框

<style lang="scss" scoped>
::v-deep .el-table .has-gutter .el-checkbox .el-checkbox__inner {
  display: none;
}

::v-deep .el-table .cell::before {
  content: '';
  text-align: center;
  line-height: 37px;
}

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13

重点是深度选择器，去页面里找到具体的class，视情况自适应

页面效果