element el-select 分组加全选

element el-select 分组加全选

1. html 给每一组加一个checkbox

<el-select v-model="value" multiple placeholder="请选择" style="width: 200px;" @change='changeSelect'>
       <el-option-group
         v-for="group in options"
         :key="group.id"
         :label="group.label">
         <el-checkbox v-model="group.checked" class="ml15" @change='selectAll($event,group.id)'>全选</el-checkbox>
         <el-option
           v-for="item in group.options"
           :key="item.value"
           :label="item.label"
           :value="item.value">
         </el-option>
       </el-option-group>
      </el-select>

2. js 在每一组中加checkd属性 控制全选

 export default {
    data () {
      return {
        options: [{
          label: '热门城市',
         id:1,
          checked:false,
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          id: 2,
          checked:false,
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }],
        value:[],
      }
    },
    methods: {
      selectAll(val,id){
        const arr = this.options.find(f=>f.id===id).options.map(m=>m.value)
        if(val){
          arr.forEach(item=>{
            if(!this.value.includes(item)){
              this.value.push(item)
            }
          })
        }else {
          this.value.forEach((item,index)=>{
            if(arr.includes(item)){
              this.value.splice(index,1,'')
            }
          })
        }
        this.value = this.value.filter(f=>f!=='')

      },
      changeSelect(val){
        this.options.forEach(item=>{
          const arr = item.options.map(m=>m.value)
          item.checked = arr.every((v) => {
            return val.some(s => s === v)
          })
        })

      }
    }
  }

效果图