不知道为什么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);
 },
Logo

前往低代码交流专区

更多推荐