vue2 elementUI 多选全选开源项目

以下是一个使用 Vue 2 和 Element UI 实现的多选全选开源项目的示例代码：

<template>
  <div>
    <el-checkbox v-model="allSelected" @change="selectAll">{{selectAllText}}</el-checkbox>
    <br />
    <el-checkbox-group v-model="selectedItems">
      <el-checkbox v-for="item in items" :key="item.id" :label="item">{{item.label}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Item 1' },
        { id: 2, label: 'Item 2' },
        { id: 3, label: 'Item 3' },
        { id: 4, label: 'Item 4' }
      ],
      selectedItems: [],
      allSelected: false
    }
  },
  computed: {
    selectAllText() {
      return this.allSelected ? 'Deselect All' : 'Select All'
    }
  },
  methods: {
    selectAll() {
      if (this.allSelected) {
        this.selectedItems = [...this.items]
      } else {
        this.selectedItems = []
      }
    }
  }
}
</script>

在该示例中，我们首先渲染一个“全选”复选框，并将其绑定到 `allSelected` 数据属性上。当用户更改复选框的选中状态时，我们会调用 `selectAll` 方法，该方法将根据 `allSelected` 数据属性将所有项目添加到或从 `selectedItems` 数组中删除。

接下来，我们使用 `el-checkbox-group` 组件渲染每个项目，并将其绑定到 `selectedItems` 数据属性上。最后，我们使用 `computed` 属性计算“全选”复选框的文本，该文本根据 `allSelected` 数据属性而变化。

这是一个基本示例，您可以根据需要进行扩展和定制。希望这可以帮助到您！