element-ui多选表格的问题

Question

element-ui多选的表格，当表格没数据的时候，鼠标悬浮到表头的全选按钮，显示的是禁用标志，但是实际上还是可以点击的，点击完会显示选中状态，如何彻底禁用，表格没数据时禁止切换样式？

Answer 1

//可以加个loading
<template>
  <el-table
    ref="multipleTable"
    v-loading="loading"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <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>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      tableData: "",
      multipleSelection: [],
    };
  },
  mounted() {
    let a = [
      {
        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 弄",
      },
    ];
//模拟加载数据
    setTimeout(() => {
      this.tableData = a;
      this.loading = false;
    }, 5000);
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

Answer 2

应该是个bug，需要禁止选中可能要提pr改源码，不过还可以通过覆写样式来达成哦

  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
      border-color: transparent;
  }
  body .el-checkbox.is-disabled.is-checked .el-checkbox__input .el-checkbox__inner {
    background: #F2F6FC;
    border-color: #DCDFE6;
  }