首先特别感谢这几位朋友的回答让我能解决问题,大家也可以直接看下面的文章!!
解决Vue 通过下表修改数组,页面不渲染的问题
vue深入响应式式原理——对象 数组
Vue中input框手动赋值成功却无法在编辑input框的值??
vue修改对象的属性值后页面不重新渲染的实例
(1)数据不能渲染.
table中的数组数据发生改变,数据不能渲染,用以下方式进行解决,我这里数组中是对象,数组中是其他类型也可
const obj = this.table[this.processCurrentIndex];
obj.processName = name;
obj.processId = id;
obj.processCode = code;
this.table.splice(this.processCurrentIndex, 1, obj);
(说白了,这里需要用splice将table中的一整行数据进行替换,其他类型也一样)
(2)不能输入或者不能点击.
开发需要,table中的 input框手动赋值成功却无法在编辑input框的值,或者一些操作,比如input不能输入,按钮不能点击等等
解决方法 在组件外围添加一层template 并声明scope,然后设置初始值 ,代码如下:
根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
1.input框
<el-table-column align="center" prop="number" label="数量" width="80">
<template scope="scope">
<el-input v-model="scope.row.number" size="mini"></el-input>
</template>
</el-table-column>
2.switch按钮
<el-table-column
align="center"
width="90"
prop="enabled"
label="是否可用"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.enabled"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</template>
</el-table-column>
3.由此Vue
实例创建时,mixData属性名
并未声明,因此Vue
就无法对属性执行 getter/setter
转化过程,导致mixData
属性不是响应式的,因此无法触发视图更新。解决的方式有两种,第一种就是显示的声明对象的属性,用在数据类型不复杂的情况,比如单纯的一个对象的时候可以直接先设置初始值,如:
data() {
return {
mixData: {
number: 1,
enabled: 1,
}, // 用来存放选择的数据,最后放入table中
};
},
其次也可以使用使用Vue
的全局API
: $set()
赋值,
这里我用的是遍历某个数组,这个数组有很多对象,将对象取出,放在最后的table中,比上面复杂,所以在遍历的时候进行数据设置
const savaLen = this.savaMaterial.length;
for (let i = 0; i < savaLen; i++) {
this.$forceUpdate();
this.$set(this.savaMaterial[i], 'sort', this.table.length + i + 1);
this.savaMaterial[i].processCode = code;
this.savaMaterial[i].processName = name;
this.savaMaterial[i].processId = id;
this.$set(this.savaMaterial[i], 'number', 1); //数量初始值为1
this.$set(this.savaMaterial[i], 'enabled', 1); //enabled就是点击按钮
}
for (let i = 0; i < savaLen; i++) {
this.table.push(this.savaMaterial[i]); // 将数据放入table中
}