vue.js element el-talbe 内嵌el-input 无法编辑,视图不刷新(更新)
不知道为什么el-table里的el-talbe-column内嵌el-input后修改内容后会无法刷新出新内容,实际log看数据是更新了,不过就是试图不刷新html代码<el-table-column prop="totalAmount" label="换购价" width="150"><template slot-scope="scope">...
·
不知道为什么el-table里的el-talbe-column内嵌el-input后修改内容后会无法刷新出新内容,实际log看数据是更新了,不过就是视图不刷新
html代码
<el-table-column prop="totalAmount" label="换购价" width="150">
<template slot-scope="scope">
<el-input v-model="scope.row.totalAmount"
@blur="onExchangeChange(scope.$index)"
:data-price="scope.row.price"
type="number" >
</el-input>
</template>
</el-table-column>
后来百度了一下,找到一个方法,加入 @input=“change(scope.$index)”
<template slot-scope="scope">
<el-input v-model="scope.row.totalAmount"
@blur="onExchangeChange(scope.$index)"
:data-price="scope.row.price"
type="number"
@input="change(scope.$index)">
</el-input>
</template>
</el-table-column>
vue.js代码
onExchangeChange: function (index) {
let tmpObj = this.curHomePageExchangeGoodsList[index];
this.$set(this.curHomePageExchangeGoodsList, index, tmpObj);
},
重点就是
this.$set(this.curHomePageExchangeGoodsList, index, tmpObj);
其中curHomePageExchangeGoodsList是table的数据源,这个也相当于行数据更新
change 代码
change: function (index) {
console.log("exchange price change");
// 重新赋值
let tmpObj = this.curHomePageExchangeGoodsList[index];
this.$set(this.curHomePageExchangeGoodsList, index, tmpObj);
},
更多推荐
已为社区贡献6条内容
所有评论(0)