使用el-checkbox实现列表多选功能封装

可以通过封装一个组件来实现表格的多选功能。这里以使用ElementUI的`el-checkbox`组件为例，封装一个可复用的多选组件。

首先，在组件中引入`el-checkbox`和定义一个`selected`数组，用于存储所有选中的行数据。

<template>
  <div>
    <el-checkbox v-model="isAllSelected" @change="handleAllSelectionChange">全选</el-checkbox>
    <el-checkbox-group v-model="selected">
      <el-checkbox v-for="item in data" :key="item.id" :label="item">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selected: [],
      isAllSelected: false
    };
  },
  watch: {
    selected(newVal) {
      this.$emit('change', newVal);
    }
  },
  methods: {
    handleAllSelectionChange(val) {
      if (val) {
        this.selected = [...this.data];
      } else {
        this.selected = [];
      }
    }
  }
};
</script>

在`el-checkbox`组件中使用了`v-for`指令，遍历表格数据，并绑定`label`属性为当前行数据，这样就可以在选中时将当前行数据添加到`selected`数组中，从而实现多选功能。

此外，还定义了`handleAllSelectionChange`方法，用于全选的实现。当全选按钮勾选时，将表格数据添加到`selected`数组中，当取消全选时，清空`selected`数组。

最后，通过`watch`监听`selected`数组的变化，并使用`$emit`方法向父组件派发`change`事件，将选中的行数据传递给父组件。

这样，就完成了一个基于`el-checkbox`的多选组件的封装，可以在不同的表格中进行复用。