element-ui中select如何实现全选功能

Question

最近在使用element-ui进行开发，现在在用select组件 其中有一个选项是全司 也就是点击后 所有分公司都能被选中 如果在所有分公司选中的情况下 点击全司的话 取消选中所有分公司 当一个个点击到所有分公司时 全司这个选项也被选中 但是写了一上午了 逻辑好像还是有问题 诸位大神能帮忙一下么？

基本结构是：
branchCode和BranchIptions

选中一个选项就往branchCode里添加一个值~

Answer 1

冲突了。

条件 1. 全公司选中，其他的公司也必须选中。
条件 2. 其他公司选中，全公司也选中。

当我一开始选中全公司，那么 我选中的队列里面就有 [全公司，广东，安徽，浙江]

由于我每次只能选择一个，所以我就无法取消任何一个选中。

比如：

1. 我点击全公司，条件2生效，全公司不会取消选中。
2. 我点击其他任意一个公司，条件1生效。也同样不会取消选中。

这就陷入了死循环。

Answer 2

在data里增加一个全选标识all,change事件触发时，判断当前all的状态和当前选中的值的状态，去改变v-model的值。
例子：
element UI select 组件全选设计

Answer 3

您好，请问您解决这个问题了吗，在我也正在写这个全选的功能，不知道应该怎么写

Answer 4

我也碰到了全选这个需求,文档里面也没有全选的函数事件之类的, 然后我照着上面的几个回答去做，感觉太麻烦了，各种逻辑判断，对我而言没必要，所以我是这样解决的,

弄两个按钮，一个全选，一个取消全选，文档：https://element.eleme.cn/#/zh...
里面说过 "为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组"
所以思路如下：
1点击全选的时候，把多选项的id，循环添加到 v-model绑定的列表内，
2点击取消时候，把v-model帮定的列表置空就行

<el-select
    style="width: 320px"
    v-model="choiceList"
    multiple
    clearable
    placeholder="请选择"
    >
        <el-row :gutter="10">
            <el-col :span="12"><el-button style="width: 100%" @click="allChoice">全选</el-button></el-col>
            <el-col :span="12"><el-button style="width: 100%" @click="cancelChoice">取消全选</el-button></el-col>
        </el-row>
        <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
        >
        </el-option>
    </el-select>
                

然后是全选和置空的逻辑

// 这是data里面的
choiceList:[],
options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]
 // method 
 allChoice(){
    let array = [];
    this.options.forEach((v)=>{
        array.push(v.value)
    });
    this.choiceList = array;
},
 cancelChoice(){
        // 重置为空
        this.choiceList = []
  },