全选和取消全选

 

html 

<table>
          <thead>
            <tr>
              <th>
                <el-checkbox @change="check" v-model="checkAll"
                  >全选/取消</el-checkbox
                >
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td>
                <el-checkbox v-model="item.checkState"></el-checkbox>
              </td>        
            </tr>
          </tbody>
</table>

data

  data() {
    return {
      checkAll: false, // 是否全选
    }}

watch

  watch: {
    tableData: {
      handler() {
        if (this.tableData.length > 0) {
          var num = 0; // 勾选的数量
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].checkState == true) {
              num++;
            }
          }
          if (this.tableData.length == num) {
            this.checkAll = true;
          } else {
            this.checkAll = false;
          }
        }
      },
      immediate: true,
      deep: true, //开启深度监听
    },
}

methods

  methods: {
    check() {
      console.log("##checkAll==>", this.checkAll);
      if (this.checkAll == true) {
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].checkState = true;
        }
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].checkState = false;
        }
      }
    },
}