1. Requirements:
In development, we will encounter a dynamic rendering drop-down selection box. Every time the Add button is clicked, a new drop-down menu can be added to the list typeList. If a drop-down menu selects one of the values A, then The A of the drop-down menu after the addition is not allowed to be selected again. We need to use our front end to disable it and not allow it to be selected.
Realization:
1. First get the options of the drop-down menu, and add an item.disabled=false attribute to each item in it, so that you can control whether the drop-down box is disabled.
this.$store.dispatch('pm/GetBrandList', {
...this.BrandListForm, ...page }).then(res => {
this.projectListOptions = res.pocket.projectList
this.projectListOptions.forEach(item => {
item.disabled = false
})
})
2. We write a method to monitor when the value of the drop-down box changes, and compare the selected value with the list data obtained from the interface. Determine whether there is the same value, and if so, disable the corresponding value of the list data.
Note: There are two places that need to be used here, [1, call this method when the value of the drop-down box is changed, 2, call this method when deleting the corresponding drop-down box]
// 项目名称选中不可以重复选择
projectnameChange (val) {
const findItem = this.projectListOptions.find(e => e.projectId === val)
// 添加其他参数值例如再项目名称后面加客户名称custmtomerName
this.addcocorporationName = findItem?.custmtomerName
this.getprojectlistdisabled(val)
},
// 获取是否有禁用数据给disabled
// 思路分析：1，准备一个空数组用来存放当前选中后下拉框值---typesarry ；
// 2, 然后遍历接口拿到的下拉框列表数据去进行遍历拿到对应value值，拿到后和我们存放选中的下拉框进行比对是否有相同的value值，有的话就disabled为true表示已经选择过不允许再次选中。
getprojectlistdisabled () {
const typesarry = []
this.BrandForm.projectNameArry.forEach(item => {
if (item.value) {
typesarry.push(item.value)
}
})
this.projectListOptions.forEach(element => {
if (typesarry.indexOf(element.value) !== -1) {
element.disabled = true
// 这里是添加额外的参数custmtomerName用来显示在项目名称旁边的
if (val) {
this.BrandForm.projectNameArry.forEach(itemchild => {
if (val === itemchild.projectId) {
itemchild.custmtomerName = this.addcocorporationName
}
})
}
} else {
element.disabled = false
}
})
},
3. Render the dynamic drop-down box as follows
<div v-if="BrandForm.projectNameArry.length > 0">
<div v-for="(item, index) in BrandForm.projectNameArry" :key="index">
<el-form-item label="项目名称" :prop="'projectNameArry.'+ index +'.value' " :rules="{ required: true, message: '请选择项目名称', trigger: 'blur' }" class="subsettypebox">
<el-select
clearable
filterable
v-model="item.value"
@change="projectnameChange"
placeholder="请选项目名称">
<el-option
v-for="item in projectListOptions"
:key="item.value"
:label="item.label"
:disabled="item.disabled"
:value="item.value">
</el-option>
</el-select>
<i @click="addproductClick(item)" class="btn-group el-icon-circle-plus-outline"></i>
<i @click="removproductClick(index)" class="btn-group del el-icon-delete" v-show="BrandForm.projectNameArry.length > 1"></i>
</el-form-item>
</div>
</div>
// 新增项目名称
addproductClick (item) {
if (!item.value) {
this.$message.warning('请先选择项目名称再进行新增操作！')
} else {
this.BrandForm.projectNameArry.push({
value: ''
})
}
},
removproductClick (index) {
this.BrandForm.projectNameArry.splice(index, 1)
this.getprojectlistdisabled()
},