vue项目,table每行多个select组件,删除一行后,另一行发生变化,不能正确显示!
问题描述
用 vue 框架,通过 v-for 遍历 tr 形成一个动态表格,表格的每一行的每个单元格都有 iview 的 select 组件。每一行都有一个按钮,点击后删除本行。现在的问题是,点击删除本行后,下面一行的 select 的选中值会被清空,无法正确获取之前选中的值。请问有解决思路吗?
表格有三行,每行的select选中一个值后,删除1002行,1003行自动变为 请选择,无法正确读取value值:
问题出现的环境背景及自己尝试过哪些方法
根据data里的数据,表格v-for遍历 lt_tab 得出一个三行的表格,每行都有select组件。点击删除其中一行后,该行的下面一行会被清空,无法正确获取value。
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
html 代码
<tr v-for="(items, itemsindex) in lt_tab">
<td>
<Select class="selects" v-model="items.val1">
<Option v-for="(item, itemindex) in xiangmu_data" :value="item.value" :key="item.value"></Option>
</Select>
</td>
<td>
<Select class="selects" v-model="items.val2">
<Option v-for="(item, itemindex) in yunsuan_data" :value="item.value" :key="item.value"></Option>
</Select>
</td>
<td>
<Select class="selects" v-model="items.val3">
<Option v-for="(item, itemindex) in qushuguize_data" :value="item.value" :key="item.value"></Option>
</Select>
</td>
<td>
<Select class="selects" v-model="items.val4">
<Option v-for="(item, itemindex) in bili_data" :value="item.value" :key="item.value"></Option>
</Select>
</td>
<td class="caozuo">
<img @click="del_lt(itemsindex)" src="../../assets/jianhao.png">
</td>
</tr>
js 代码
xiangmu_data: [
{
value: '1001'
},
{
value: '1002'
},
{
value: '1003'
}
],
yunsuan_data: [
{
value: '1000'
},
{
value: '1000'
}
],
qushuguize_data: [
{
value: '1000'
},
{
value: '1000'
}
],
bili_data: [
{
value: '100'
},
{
value:'200'
}
],
lt_tab: [
{
val1: '',
val2: '',
val3: '',
val4: ''
},
{
val1: '',
val2: '',
val3: '',
val4: ''
},
{
val1: '',
val2: '',
val3: '',
val4: ''
}
],
你期待的结果是什么?实际看到的错误信息又是什么?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论