已经选择的数据不能被选择js
举个例子
场景:选择不同价格下的苹果数量,已经被选择的价格不能被选择,点击+, 新增一行
初始:
实现效果:
`
基础思路
页面
<div style="display: flex;flex-direction: column;">
<div v-for="item in fruitBase" style="display: flex;margin-bottom: 10px;">
<div style="width: 50px;">苹果:</div>
<el-select v-model="item.price" value-key="id" style="width: 280px;margin: 0 18px;" @change="change">
<el-option v-for="el in item.optionaList" :key="el.id" :label="el.price" :value="el"></el-option>
</el-select>
<div style="width: 50px;">数量:</div>
<el-input v-model="item.num" style="width: 200px;" clearable/>
</div>
</div>
// 所有数据
const fruitBase = ref([{}])
// 价格数据
const baseArr = ref([])
baseArr.value = [
{id:1,price:'12.8',name:'苹果'},
{id:2,price:'9.8',name:'苹果'},
{id:3,price:'15.8',name:'苹果'},
{id:4,price:'16.8',name:'苹果'},
{id:5,price:'14.8',name:'苹果'},
]
const change = ()=>{
updateSelectLdList(fruitBase.value)
}
const add = ()=>{
fruitBase.value.push({})
updateSelectLdList(fruitBase.value)
}
//更新待选择价格列表
const updateSelectLdList = (data)=>{
//遍历输出所有列表
data.forEach(tobesetElement => {
//所有价格
let list = JSON.parse(JSON.stringify(baseArr.value));
data.forEach(element => {
//筛选价格列表中其他行选中的价格
if(tobesetElement != element){
//如果其他行已选中,则从list中删除
if(element.price!= null){
// 单项下拉
let id = element.price.id
const index = list.findIndex(obj =>{
return obj.id === id
})
if (index!=-1) {
list.splice(index,1)
}
// 多选下拉
// let didList = element.price.map(item => item.id);
// didList.forEach(selectid => {
// const index = list.findIndex(obj =>{
// return obj.id === selectid
// })
// if (index!=-1) {
// list.splice(index,1)
// }
// });
}
}
});
tobesetElement.optionaList = list
});
}