element-ui表格组件去掉全选框

element-ui表格组件去掉全选框

因项目需求，特此记录

效果如下

代码如下

<template>
  <div class="content-box">
    <div class="container">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-class-name="cellClass"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">
          切换第二、第三行的选中状态
        </el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: []
    }
  },
  created(){
    
  },
  methods: {
    // 隐藏表头中的全选框
    cellClass(row) {
      console.log(row);
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val)
    }
  }
}
</script>

<style scoped lang="scss">
/* 去掉全选按钮 */
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
  display: none !important;
}

::v-deep .el-table .disabledCheck .cell::before {
  content: '文本';
  text-align: center;
  line-height: 37px;
}
</style>

解决如下

1、添加 <el-table-column type="selection"></el-table-column> 添加复选框列
2、给 <el-table :header-cell-class-name="cellClass"></el-table> 方法（这个方法主要就是给表格所需要的列添加类名。）具体可以看ElementUi的表格API；

// methods中添加方法
 cellClass(row){     
    if (row.columnIndex === 0) {           
     return 'disabledCheck'     
    } 
},

// 备注：cellClass()方法主要给复选框那一列添加 类名为 ‘disabledCheck’

3、css样式设置隐藏

<style scoped lang="scss">
/* 去掉全选按钮 */
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
  display: none !important;
}

// 这里可以修改全选框那部分内容，如果不想添加，可忽略这部分代码
::v-deep .el-table .disabledCheck .cell::before {
  content: '文本';
  text-align: center;
  line-height: 37px;
}
</style>

但是有个表格只能单选，那继续改

那用table实现 checkbox 实现单项选择

<template>
  <div class="content-box">
    <div class="container">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column width="55" align="center" prop="checked" label="">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.checked"
              @change="changeCurrentRow($event, scope.$index, scope.row)"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          checked: false
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          checked: false
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          checked: false
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          checked: false
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          checked: false
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          checked: false
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          checked: false
        }
      ],
      multipleSelection: [],
      currentRow: []
    }
  },
  created() {},
  methods: {
    //改选行
    changeCurrentRow(val, rowIndex, row) {
      const data = this.tableData
      //遍历表格的数据，将非本行的所有数据的checked属性置为false，即取消选择
      for (let index in data) {
        if (index == rowIndex) {
          data[index].checked = val
        } else {
          data[index].checked = false
        }
      }
      this.tableData = data
      this.currentRow = row //保存我们的行数据，这样用户点击不同的行都能保证我们直接获取到对应的数据
      console.log(this.tableData, this.currentRow)
    },
    handleEdit(index, event) {
      console.log('编辑', index, event);
    },
    handleDelete(index, event) {
      console.log('删除', index, event);
    }
  }
}
</script>

<style scoped lang="scss">

</style>