全选前:
全选后:
代码部分:
<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 = []
}
}
我这儿是有多个下拉框 ,逻辑及比较多,如果只有一个就很简单,具体根据需求来