vue table动态新增input行，修改值后无法输入

1. 问题描述：

如上图，在切换类型的时候，前端需要动态的去清空固定值或者备注input框的原有的值。

原数组dimensionMatcherMetas：

2.解决方法：

尝试给类型select框一个change事件，并将当前行的数据、index传到事件里，拿到值后去修改当前行的数据，令currentRow.固定值 = '' "、currentRow.备注 = “”。

尝试的方法：

第一种（错误方式）：直接给拿到table行的index后复制对应属性改变当前index的某个属性值

结果：修改table的数据不起作用，input框反而不能输入了。

第二种（错误方式）：考虑用this.$set(this.pageDetail.dimensionMatcherMetas，index，obj)实现

 结果：和第一种实现方式的结果一样，不能输入。

第三种（错误方式）：采用强制改变数组的方法，利用splice改变数组，使数据响应式变化

 //[切换维度类型，清空备注或者固定值]
        initDimension(currentRow, index) {
            currentRowTemp.desc = '';
            currentRowTemp.value = '';
            this.pageDetail.dimensionMatcherMetas[index] = currentRowTemp;
            this.pageDetail.dimensionMatcherMetas = this.pageDetail.dimensionMatcherMetas.splice(
                0,
                this.pageDetail.dimensionMatcherMetas.length
            );
        },

结果：第一次改变的时候是可以输入值的，多切换两次，会发现又无法输入了，搞到这里我猜测是涉及到属于深浅拷贝的问题了，在改变currentRow的时候，将原数组也变化了，所以导致了切换几次又无法输入的情况。

第四种（成功解决问题）：第三种加上深拷贝当前行即可

import _ from 'lodash';//引入lodash工具，可以用_.cloneDeep()直接实现深拷贝，若果不会用，可以网上搜一个深拷贝实现也可！

//[切换维度类型，清空备注或者固定值]
        initDimension(currentRow, index) {
            let currentRowTemp = _.cloneDeep(currentRow);
            currentRowTemp.desc = '';
            currentRowTemp.value = '';
            this.pageDetail.dimensionMatcherMetas[index] = currentRowTemp;
            this.pageDetail.dimensionMatcherMetas = this.pageDetail.dimensionMatcherMetas.splice(
                0,
                this.pageDetail.dimensionMatcherMetas.length
            );
        },

标签：index,vue,currentRowTemp,currentRow,pageDetail,值后,input,固定值,dimensionMatcherMeta
来源： https://blog.csdn.net/qq_41885295/article/details/122056073