element-ui 表格 修改后 表格里面的数据后 页面不实时更新问题 完美解
- 想要达到的效果：点击"更多"后，"更多"隐藏，删除和补仓显示；（有时间可全部看完， 没时间直接看做法6/7 ）
- 尝试用的方法：自己用 this.show、在百度上找的方法 set 都没能成功
- 提示：最下面有代码demo
页面初始化：
目标效果
做法1：
给"更多"绑定一个
v-show='show'把this.show设置为true ，点击"更多"按钮后 在点击事件里面把this.show设置为false；结果1：
未成功，点击一个"更多"，其他所有的"更多"都隐藏起来了
原因1：
循环的时候show给了表格所有的行，所以点击一个"更多"导致所有的"更多"都隐藏了；
做法2：
给"更多"绑定一个
v-show='(scope.$index+1)'<span> </span>，理想状态是：索引最低是0，+1后，至少也为1,所以显示，给删除和补仓设置为v-show='!(scope.$index+1)'<span> </span>取反就是隐藏了；结果2：
未成功，报错
做法3：
当取到表格的data数据后，循环给数据一个flag =true ，在赋值给表格，点击"更多"后把当前的行索引拿到 ，把当前行的
this.tables[index].flag = false设置为false；结果3
未成功，点击第一个 “更多"可以 隐藏"更多”，显示 删除、补仓， 出现问题：在点击其他行的"更多"就不能正常显示和隐藏，还是有问题
做法4：
百度到的结果：用set方法，当取到表格的data数据后，循环给数据一个flag =true ，在赋值给表格，点击"更多"后把当前的行索引拿到 ，把当前行的
this.tables[index].flag = false设置为false； 并 设置：this.$set(this.tables);结果4
未成功，结果是点击第一个"更多"可以改变，点击其他的"更多"还是改变不了；
做法5：
把当前行的
this.tables[index].flag = false设置为false；然后在把 表格的数据 用JSONthis.tables = JSON.parse(JSON.stringify(this.tables));<span> </span>值重新克隆一遍 再赋值给表格就OK了结果5：
成功(有缺陷)， 如果只有 new Date的话 转化就会有问题
做法5的缺陷：
如果有 new Date的话，转化就会有问题 (会把new Date转化成 字符串)
做法6：
使用
JSON.parse(JSON.stringify(this.tables))也可行，但是怎么能止步于此呢，赋值给tables表格，那么我还能这样this.tables = this.tables.filter(item => item);，把每一项重新 复赋值给this.tales；结果
成功， 所有的表格项可以正常隐藏 和显示
做法6 完美解决了缺陷
做法7： Object.assign
直接使用es6的 Object.assign复制一个新的对象
this.tables = Object.assign([],this.tables)少去了过滤循环的麻烦 简单明了结果
成功， 所有的表格项可以正常隐藏 和显示
做法8：未测试
使用 this.$forceUpdate()
vue强制更新$forceUpdate()
添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。
调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。
我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用 this.$forceUpdate() )
以下demo代码可复制到新的vue文件里面直接查看，点击查看效果
<template>
<div>
<hr />
<el-button @click="showTable">显示表格</el-button>
<el-table :data.sync="tables" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="info" size="small">编辑</el-button>
<el-button
type="primary"
size="small"
v-show="scope.row.flag"
@click="more(scope.$index,scope.row)"
>更多</el-button>
<div v-show="!scope.row.flag">
<el-button type="danger" size="small">删除</el-button>
<el-button type="success" size="small">补仓</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tables: [],
getList: [{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄111",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄222",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄333",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄444",
}
]
};
},
watch: {},
methods: {
showTable() {
// this.getList 表示请求到的数据
// this.tables 表格 data
if (this.getList.length > 0) {
this.getList.forEach(val => {
val.flag = true;
});
}
this.tables = this.getList;
},
more(index, val) {
console.log("更多", index, val);
this.tables[index].flag = false;
// this.tables = JSON.parse(JSON.stringify(this.tables)); // 如果不转化 页面不生效
this.tables = Object.assign([],this.tables) // 赋值一个新的对象
// this.tables = this.tables.filter(item => item);
console.log("转化之后", this.tables);
}
}
};
</script>
- 参考链接
https://blog.csdn.net/wuj1935/article/details/106025559/
