1. 要件:
開発中は、動的レンダリング ドロップダウン選択ボックスが表示されます. [追加] ボタンをクリックするたびに、新しいドロップダウン メニューをリスト typeList に追加できます. ドロップダウン メニューがいずれかを選択した場合値A, その後、追加後のドロップダウンメニューのAは、再度選択することはできません. フロントエンドを使用して無効にし、選択できないようにする必要があります.
実現:
1. 最初にドロップダウン メニューのオプションを取得し、その中の各項目に item.disabled=false 属性を追加して、ドロップダウン ボックスを無効にするかどうかを制御できるようにします。
this.$store.dispatch('pm/GetBrandList', {
...this.BrandListForm, ...page }).then(res => {
this.projectListOptions = res.pocket.projectList
this.projectListOptions.forEach(item => {
item.disabled = false
})
})
2. ドロップダウン ボックスの値が変更されたときに監視するメソッドを作成し、選択した値をインターフェイスから取得したリスト データと比較します。同じ値があるかどうかを判断し、ある場合は、リスト データの対応する値を無効にします。
注: ここで使用する必要がある場所が 2 つあります。[1、ドロップダウン ボックスの値が変更されたときにこのメソッドを呼び出す、2、対応するドロップダウン ボックスを削除するときにこのメソッドを呼び出す]
// 项目名称选中不可以重复选择
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. 動的ドロップダウン ボックスを次のようにレンダリングします。
<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()
},