获取数据。每次下拉框获取焦点时,通过循环给获取数据的每一项都加disabled属性并设置为false,判断获取的数据中是否包含自己选过的数据,若包含则在获取的数据中把该条数据disabled设置为true。
<a-table
:columns="columns"
:data-source="syList"
:pagination="false"
>
<template slot="syCode" slot-scope="text, record, index">
<a-select
style="width: 140px"
v-model="syList[index].syCode"
placeholder="请选择"
@focus="handleFocus"
>
<a-select-option
:value="item.dataCode"
v-for="(item, i) in data"
:key="i"
:disabled="item.disabled"
>
{
{ item.dataLable }}
</a-select-option>
</a-select>
</template>
</a-table>
data(){
syList:[],//自己选过的数据
data:[],//获取的数据(下拉框中的数据)
columns:[
{
title: "syCode",
align: "center",
key: 'syCode',
scopedSlots: {
customRender: "syCode" },
},
]
}
//获取数据
created () {
getData().then(res => {
this.data = res.data
})
},
methods:{
handleFocus () {
if (this.data) {
this.data.forEach((item) => {
item.disabled = false//每次下拉都需要重置禁用属性
})
}
if (this.syList) {
this.data.forEach((item) => {
this.syList.forEach((myitem) => {
if (item.dataCode === myitem.syCode) {
item.disabled = true
}
})
})
this.$forceUpdate(); //一定要刷新组件!!!!!!!!!!!!
}
},
}