别再手动点选了，vue+element实现表格中点击某一行全选框选中此行所有选框

前言

表格是一个常见的组件，而表格中的复选框也是必不可少的。但是，当我们想要选中整行数据时，却需要一个个勾选复选框，这实在太麻烦了。本文将介绍如何使用 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>