el-select 下拉框多选 增加全选

全选前：

全选后：

 

代码部分：

 <el-form-item label="培训对象："
               :prop="`upRoles[${index}].roles`"
               :rules="rules.roles">
     <el-select v-model="item.roles"
                placeholder="请选择"
                multiple
                filterable
                default-first-option
                @change="selectChange"
                @remove-tag="removeTag"
                style="width:100%">
         <el-checkbox v-model="item.selectChecked"
                      @change="(selectChecked)=>{selectAll(selectChecked, index)}"
                      class="all_checkbox">全选</el-checkbox>
         <el-option v-for="item in trainOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
         </el-option>
     </el-select>
 </el-form-item>

 

const state = reactive({
   trainOptions: [], // 下拉框的数据
})

   // 全选
   const selectAll = (value, index) => {
       const arr = JSON.parse(JSON.stringify(state.trainOptions))
             if (value) {
                const arr2 = []
                arr.forEach(ite => {
                    if (!ite.disabled) {
                        arr2.push(ite.value)
                        ite.disabled = true
                    }
                })
                state.trainOptions = arr
                state.courseTemplate.upRoles[index].roles = state.courseTemplate.upRoles[index].roles.concat(arr2)
            } else {
                const arr3 = state.courseTemplate.upRoles[index].roles
                arr.forEach(item => {
                    arr3.forEach(item1 => {
                        if (item.value === item1) {
                            item.disabled = false
                            state.trainOptions = arr
                        }
                    })
                })
                state.courseTemplate.upRoles[index].roles = []
            }
        }

我这儿是有多个下拉框  ，逻辑及比较多，如果只有一个就很简单，具体根据需求来