element表格可编辑（解决 elementUI 的 table 表格改变数据不更新问题 解决 vue数据不更新问题 element-ui 表格数据不更新）
导读：<template> <el-table...
<template>
<el-table
ref="table"
:data="tableData"
border
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>
<el-button @click="changeRowData"></el-button>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: 2016-05-02,
name: 王小虎,
address: 上海市普陀区金沙江路 1518 弄
}, {
date: 2016-05-04,
name: 王小虎,
address: 上海市普陀区金沙江路 1517 弄
}, {
date: 2016-05-01,
name: 王小虎,
address: 上海市普陀区金沙江路 1519 弄
}, {
date: 2016-05-03,
name: 王小虎,
address: 上海市普陀区金沙江路 1516 弄
}]
},
methods: {
// 改变第一行数据
changeRowData(){
this.tableData[0].name = zz
// 数据并不会更新
},
}
}
}
</script>
1 、随便调用 页面其他事件 达到页面改变刷新数据 (推荐)
利用 v-if这些都是一个逻辑 ，都是改变事件 ，达到数据刷新 ，没必要用 v-if 消耗性能
// 改变第一行数据 changeRowData(){ this.tableData[0].name = zz // 数据并不会更新, 随便调用一下页面事件 ，什么事件都可以 ，聚焦等都可以 ，这里使用 element 表格自带的高亮行事件 this.$refs.table.setCurrentRow(this.tableData[0]) },2 、使用 this.$set(this.data,index,row)
比较耗性能
// 改变第一行数据 changeRowData(){ this.tableData[0].name = zz this.$set(this.tableData,0,this.tableData[0]) },
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！