problem description

use the vue framework to form a dynamic table through v-for traversing the tr. Each cell of each row of the table has the select component of iview. Each line has a button, click to delete the line. The problem now is that after clicking to delete this line, the selected value of select in the following line will be cleared and the previously selected value cannot be obtained correctly. Is there a solution?

table has three rows. After a value is selected for each row, 1002 rows are deleted and 1003 rows are automatically changed to please select. The select value cannot be read correctly:

the environmental background of the problems and what methods you have tried

based on the data in data, the table v-for traverses lt_tab to get a three-row table, each with a select component. After clicking to delete one of the rows, the lower line of the line will be cleared and the value cannot be obtained correctly.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

html Code

    <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 Code

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

what result do you expect? What is the error message actually seen?