vue2 elementui封装支持全选或全不选的多选框

好的，下面是一个封装了支持全选或全不选的多选框的Vue组件，使用了ElementUI中的el-checkbox和el-checkbox-group组件。

<template>
  <el-checkbox
    :indeterminate="isIndeterminate"
    :checked="isChecked"
    @change="handleCheckAllChange">
    {{ label }}
  </el-checkbox>
  <el-checkbox-group v-model="checkedList" @change="handleCheckedListChange">
    <el-checkbox v-for="(item, index) in options" :label="item.value" :key="index">
      {{ item.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkedList: this.value,
      isIndeterminate: false,
      isChecked: false
    }
  },
  watch: {
    value(newValue) {
      this.checkedList = newValue
    },
    checkedList(newList) {
      this.$emit('input', newList)
      this.updateCheckAll()
    },
    options(newOptions) {
      this.updateCheckAll()
    }
  },
  methods: {
    handleCheckedListChange() {
      this.updateCheckAll()
    },
    handleCheckAllChange(value) {
      this.isChecked = value
      this.isIndeterminate = false
      if (value) {
        this.checkedList = this.options.map(item => item.value)
      } else {
        this.checkedList = []
      }
    },
    updateCheckAll() {
      const checkedCount = this.checkedList.length
      const optionCount = this.options.length
      this.isChecked = checkedCount === optionCount && checkedCount > 0
      this.isIndeterminate = checkedCount > 0 && checkedCount < optionCount
    }
  }
}
</script>

在上面的代码中，我们定义了一个名为`CheckAllCheckbox`的组件，该组件接收三个props：`label`、`options`和`value`。其中：

- `label`：用于显示全选/全不选的多选框的标签。
- `options`：用于渲染多选框的选项列表，每个选项有`label`和`value`两个属性。
- `value`：用于绑定多选框的选中值。

在组件的data选项中，我们定义了三个变量：

- `checkedList`：用于存放多选框的选中值，初始值为`value`属性的值。
- `isIndeterminate`：用于控制全选/全不选的多选框是否处于不确定状态。
- `isChecked`：用于控制全选/全不选的多选框是否被选中。

在组件的watch选项中，我们监听了`value`和`options`的变化，当它们变化时，我们重新计算并更新全选/全不选的多选框的状态。

在组件的methods选项中，我们定义了三个方法：

- `handleCheckedListChange`：用于在多选框的选中值发生变化时，更新全选/全不选的多选框的状态。
- `handleCheckAllChange`：用于在全选/全不选的多选框的选中状态发生变化时，更新多选框的选中值。
- `updateCheckAll`：用于更新全选/全不选的多选框的状态，会在多选框的选中值发生变化时和选项列表发生变化时调用。

希望这个组件可以帮助到您，如果您有任何问题，请随时向我提问。