vue项目,table每行多个select组件,删除一行后,另一行发生变化,不能正确显示!

发布于 2022-09-11 14:58:50 字数 2693 浏览 12 评论 0

问题描述

用 vue 框架,通过 v-for 遍历 tr 形成一个动态表格,表格的每一行的每个单元格都有 iview 的 select 组件。每一行都有一个按钮,点击后删除本行。现在的问题是,点击删除本行后,下面一行的 select 的选中值会被清空,无法正确获取之前选中的值。请问有解决思路吗?

表格有三行,每行的select选中一个值后,删除1002行,1003行自动变为 请选择,无法正确读取value值:
clipboard.png

clipboard.png

问题出现的环境背景及自己尝试过哪些方法

根据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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文