vue 使用ElementUI 在表格外设置全选的多选框

未选择状态：

未全选状态：

全选状态：

二、代码实现

data：

data(){
    return{
        //数据
        tableData:[],
        /*全选的问题 */
        multipleSelection: [],
        isIndeterminate: false,
        //表格外全选
        checkAll: false,
    }
}

表格外全选功能的多选框：

<el-checkbox
     v-model="checkAll"
     :indeterminate="isIndeterminate"
     @change="handleCheckAllChange"
     style="margin-right: 30px"
 >
    <span class="qxText">
        全选本页(已选{
         
  { this.multipleSelection.length }}个)
    </span>
 </el-checkbox>

表格内的多选：

<el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-style="{ font-size: 12px }"
        :header-cell-style="{
          background: #f9f9f9,
          font-size: 12px,
          line-height: 18px,
          color: #767989,
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
 </el-table>

表格外全选方法：

// 点击外部全选
    handleCheckAllChange(val) {
      this.checkAll = val;
      var rows = this.tableData;
      var value = val ? rows : [];
      console.log(this.$refs.multipleTable);
 
        if (val) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
        console.log(this.multipleSelection);
      }

表格内点击：

// 表格内点击多选框
    handleSelectionChange(val) {
      console.log(val);
      let checkedCount = val.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableData.length;

      this.multipleSelection = val;
    },