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

1. 问题描述:

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

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

原数组dimensionMatcherMetas:

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

2.解决方法:

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

尝试的方法:

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

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

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

第二种(错误方式):考虑用this.$set(this.pageDetail.dimensionMatcherMetas,index,obj)实现

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

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

第三种(错误方式):采用强制改变数组的方法,利用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
            );
        },

上一篇:Xshell快捷键


下一篇:springboot集成mybatis