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: ''
    }
],

你期待的结果是什么?实际看到的错误信息又是什么?

2018-11-02 提问
0 个回答

撰写答案

推广链接