How do I dynamically modify the value of elementUI based on other data in the current row in the v-model data table?

my requirement is to embed the form in the data table implemented with elementUI. Each row will have input controls for range selection and value input. The value of the v-model bound by input in the second red box is dynamic. When you enter the input in the second red box first, the v-model of this input is called startValue, if you type the content in the first input box. Then the v-model in the first red box becomes startValue, the v-model of input in the second red box becomes endValue

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

I have tried to put two input in the second red box and use v-if to show and hide, but when I operate v-if, the input of other lines will also hide or show

related codes

<template>
    <div id="">

        <el-table :data="formData.listDetail" style="width: 100%">
            <el-table-column label="" width="500px">
                <template slot-scope="scope">
                    <el-row :gutters="20">
                        <el-col :span="6">
                            <el-input v-model="scope.row.startValue"></el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-select v-model="scope.row.compareType">
                                <el-option v-for="item in companyData" :key="item.compareType" :label="item.value" :value="item.compareType">

                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-select v-model="scope.row.compareType1">
                                <el-option v-for="item in companyData1" :key="item.compareType" :label="item.value" :value="item.compareType">

                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-input v-if="true" v-model="scope.row.endValue"></el-input>
                            <el-input v-if="false" style="border:1px solid red;" v-model="scope.row.startValue"></el-input>

                        </el-col>
                    </el-row>

                </template>
            </el-table-column>
            <el-table-column label="" width="150px">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.value"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="">
                <template slot-scope="scope">
                    <el-button type="text " @click="addRow() "></el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-button @click="submit() "></el-button>
    </div>
</template>

<script>
    //     import axios from "axios "
    export default {
        data() {
            return {
                endValueShow: false,
                startValueShow: true,
                valueStatus: " ",
                formInline: {

                },
                searchData: {},
                companyData: [{
                        value: " ",
                        compareType: 1
                    },
                    {
                        value: " ",
                        compareType: 2
                    },
                    {
                        value: " ",
                        compareType: 3
                    },
                    {
                        value: " ",
                        compareType: 4
                    },
                    {
                        value: " ",
                        compareType: 5
                    },
                ],
                companyData1: [{
                        value: " ",
                        compareType: 1
                    },
                    {
                        value: " ",
                        compareType: 2
                    },
                    {
                        value: " ",
                        compareType: 3
                    },
                    {
                        value: " ",
                        compareType: 4
                    },
                    {
                        value: " ",
                        compareType: 5
                    },
                ],

                formData: {
                    listDetail: [{
                        compareType: " ",
                        value: " ",
                        endValue: " ",
                        startValue: " "
                    }]
                },

            }
        },
        methods: {

            submit() {
                let data = {
                    listDetail: this.formData.listDetail
                }
                console.log(data)
            },
            addRow() {
                this.formData.listDetail.push({
                    compareType: " ",
                    value: " ",
                    endValue: " ",
                    startValue: " "
                })
            },

        },
        watch: {
            valueData: {
                handler(newValue, oldValue) {
                    console.log("")
                    console.log(newValue)
                    console.log("")
                    console.log(oldValue)
                },
                deep: true
            },

        }

    }
</script>
<style type="text/css">
    .el-select .el-input {
        width: 130px;
    }
</style>

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

the input box that you want to implement the second input box will change the v-model to the v-model of input in the first red box of endValue, and become startValue. when the input value of the first input box is detected. If you enter input directly in the second red box, the value of v-model is start-value