elementUI 数据表格中如何根据当前行的其他数据动态修改v-model的值？

Question

我的需求是使用elementUI实现的数据表格中嵌入表单，每一行会有范围选择和值输入的input控件，第二个红色框中的input 绑定的v-model的值是动态的，当先输入第二个红色框中的input的时候，这个input的v-model叫startValue,如果在第一个输入框输了内容，则第一个红框中的v-model变成startValue,第二个红框中的input的v-model变成endValue

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

我尝试过将第二个红色框中的input放两个，用v-if来显示和隐藏，但是操作v-if的时候，其他行的input也会隐藏或显示

相关代码

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

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

希望实现第二个输入框的input框会在检测到第一个输入框有输入值的时候，v-model变成endValue，第一个红色框中的input的v-model变成startValue.如果直接在第二个红色框内的input输入则v-model的值为start-value

Answer 1

绑定还是原来的绑定，通过computed的getter/setter计算出实际需要的数据。