需求:同一个表单 不同的下拉框 人员数据相同;但是在第一个下拉框选择人员后;其他下拉框对此人员只做展示(禁用),不能勾选。
<el-form-item label="电" prop="electricity" style="width: 50%"><el-selectv-model="ruleForm.electricity.chargeName"clearablemultiple:multiple-limit="limitNumber"style="width: 100%"@visible-change="getUserList($event, '电', 'electricityList')"@change="selectUserChange($event, 'electricityList', 'electricity')"><el-optionv-for="item in electricityList":key="item.userId":label="item.empName":value="item.empName":disabled="[...ruleForm.chassis.chargeName].indexOf(item.empName) !== -1"/></el-select></el-form-item><el-form-item label="内" prop="inner" style="width: 50%"><el-selectv-model="ruleForm.inner.chargeName"style="width: 100%"clearablemultiple:multiple-limit="limitNumber"@visible-change="getUserList($event, '内', 'innerList')"@change="selectUserChange($event, 'innerList', 'inner')"><el-optionv-for="item in innerList":key="item.userId":label="item.empName":value="item.empName":disabled="[...ruleForm.electricity.chargeName].indexOf(item.empName) !== -1"/></el-select></el-form-item>
limitNumber: 3 //限制选择的个数// 获取数据
async getUserList(val, name, list) {if (val) {const { row } = await reqUserList(name)this[list] = row}
}
这样就做到了已选择的人员 再其他的下拉框中无法勾选