vue基于element实现表格中点击某一行全选框选中此行所有选框

前言

一般情况下，我们对表格进行批量操作时，会选中表格对应的列，通过表头上的一个选框即可控制整个表格对应列选框的状态；如果想要在某一行中通过一个选框控制当前行所有选框全选与反选该如何操作呢？下面一起看看实操吧。

效果如下：

实现思路：

全选事件中我们需要拿到每一项数据绑定的 model 与当前点击的框的 id 进行比较，如果相同将其用 push 方法添加到定义好的数组中，全不选使用 indexOf 方法匹配对应 id 通过 splice 方法删除即可；点击单个的选框时，我们则需要拿到点击选框的状态 （true/false） 值，通过此状态去控制全选框的状态 （选中/未选中） 。

源码：

<template>
  <div style="padding:10px">
    <!-- 表格 -->
    <el-table :data="tableData" border>
      <el-table-column prop="children" label="权限">
        <template slot-scope="scope">
          <!-- n个多选框框 -->
          <el-checkbox-group v-model="checkList">
            <el-checkbox @change="(e) => multiple(e, scope.row.id)" v-for="(item, index) in scope.row.children" :key="index"
              :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 全选框 -->
          <el-checkbox v-model="scope.row.checkAll" :label="scope.row.name" @change="(e) => checkAll(e, scope.row.id)"></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkList: [], //复选框绑定model
      tableData: [//模拟数据
        {
          checkAll: false,
          id: 1,
          name: "全选",
          children: [
            {
              multiple: false,
              id: 11,
              name: "单选1",
            },
            {
              multiple: false,
              id: 12,
              name: "单选2",
            },
            {
              multiple: false,
              id: 13,
              name: "单选3",
            },
          ],
        },
        {
          checkAll: false,
          id: 2,
          name: "全选",
          children: [
            {
              multiple: false,
              id: 21,
              name: "单选1",
            },
            {
              multiple: false,
              id: 22,
              name: "单选2",
            },
            {
              multiple: false,
              id: 23,
              name: "单选3",
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 全选事件
    checkAll(type, id) {
      // 每一项数据绑定的model与当前点击的框相同时返回下标
      const index = this.tableData.findIndex((item) => {
        return item.id == id;
      });
      // 被点击当前行的数据
      const resValue = this.tableData[index];
      if (type) {
        // 全选
        resValue.children.forEach((item) => {
          if (this.checkList.indexOf(item.id) == -1) {
            this.checkList.push(item.id);
          }
        });
      } else {
        // 全不选
        resValue.children.forEach((item) => {
          this.checkList.splice(this.checkList.indexOf(item.id), 1);
        });
      }
    },
    // n个多选框事件
    multiple(type, id) {
      // 每一项数绑定的model与当前点击的框相同时返回下标
      const index = this.tableData.findIndex((item) => {
        return item.id == id;
      });
      // 当前行的数据
      const resValue = this.tableData[index];
      // 当前行的check值
      const checkValue = [];
      // 用户选中的check值
      const _checked = [];
      resValue.children.map((item) => {
        checkValue.push(item.id);
        this.checkList.map((cItem) => {
          if (item.id == cItem) {
            _checked.push(cItem);
          }
        });
      });
      if (type) {
        if (checkValue.toString() == _checked.toString()) {
          resValue.checkAll = true;
        }
      } else {
        if (checkValue.toString() != _checked.toString()) {
          resValue.checkAll = false;
        }
      }
    },
  },
};
</script>