Vue + element using the external buttons to achieve the table (page) Select All, Invert Selection

template section:

 <el-button
      icon="el-icon-check"
       round
       :indeterminate="isIndeterminate"
       v-model="checkAll"
       @click="selAll()">全选
</el-button>
<el-button
       icon="el-icon-finished"
       round
       @click="unselAll(tableData)">反选
</el-button>

script section:
(really mostly official documents which the second and third line of the selected state, anti-election that will twenty-three line directly into tableData [] OK.)

selAll() {
                if (this.$refs.multipleTable.selection.length < this.tableData.length) {
                    this.checkAll = true;
                } else {
                    this.checkAll = false;
                }
                this.$refs.multipleTable.toggleAllSelection();
            },
            //表格内checkbox触发的全选按钮状态变化
            selRow(val) {
                if (val.length < this.tableData.length && val.length > 0) {
                    this.isIndeterminate = true;
                } else if (val.length === this.tableData.length) {
                    this.isIndeterminate = false;
                    this.checkAll = true;
                } else if (val.length === 0) {
                    this.isIndeterminate = false;
                    this.checkAll = false;
                }
            },
            unselAll(rows) {
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
            },

Monitor events:

 watch: {
    // 监听表格多选事件
    tableData: {
      handler(value) {
        if (this.checkAll) {
          this.tableData.forEach(row => {
            if (row) {
              this.$refs.multipleTable.toggleAllSelection(row, true)
            }
          })
        }
      },
      deep: true
    }
  },
Published 80 original articles · won praise 82 · views 10000 +

Guess you like

Origin blog.csdn.net/qq_42893625/article/details/104768690