(vue)自动表格下拉框选中后对应显示其他信息且修改行互不影响
所走弯路 :修改已选过的下拉值,其他行值错乱
原因:之前是找到对应数据后给表格push进整个item
修改:根据选框值找到展示数据后,只给表格数据对应赋所需要的值就行
<template slot-scope="{ index }" slot="en">
<Select
v-model="reltableData[index].en"
filterable
placeholder="请选择"
@on-change="relChange(reltableData[index].en)" //选框值改变事件
>
<Option
v-for="(item, index) in attListCh"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
>
</Option>
</Select>
</template>
js
//表格数据格式
reltableData: [
{
en: "",
conceptNames: "",
type: "",
},
],
//新增变化
relChange(val) {
this.attList.forEach((item) => {
if (val == item.en) {
this.reltableData.forEach((ele) => {
//对应赋值
if (ele.en == item.en) {
ele.conceptNames = item.conceptNames;
ele.type = item.type;
}
});
}
});
},
其他代码与上一篇类似