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

全选前：

全选后：

 

代码部分：

 
     
         全选
         
         
     
 

 

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 = []
            }
        }

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