1024程序员节 vue.js javascript elementUI的table表格改变数据不更新问题解决

需求： table表格中 给按钮添加10秒倒计时； 点击按钮后将按钮改为禁止点击状态，10秒后恢复正常 如图： 本以为是一个很简单的需求，直接就写了，结果发现没效果，最后通过打印该行数据发现： 行数据值已经改变了 但是页面上还是false 错误代码：

问题原因：在 Vue 实例创建时，以及 data 赋值时 btnDisabled并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新。

解决方法：

使用：key 或者 v-if 修改绑定在 table 上面的 key 值，可以触发 table 的重新渲染，这样就可以把修改后的 data 在表格里面更新渲染。

修改后代码：

ref="table"

v-loading="crud.loading"

:header-cell-style="{ color: '#FFF', background: '#333' }"

:cell-style="{ color: '#FFF', background: '#333' }"

:data="crud.data"

style="width: 100%"

:max-height="520"

:default-sort="{ prop: 'updatetime', order: 'descending' }"

@sort-change="sortChange"

:key="itemKey"

>

:label="$t('storagePos.operation')"

width="150px"

align="center"

fixed="right"

>

data() {

return {

itemKey: 0,

};

},

methods:{

// 重发

output(index, row) {

row.btnDisabled = true;

this.itemKey++;

//调用倒计时方法 key 自动加一

this.timers = setTimeout(() => {

row.btnDisabled = false;

this.itemKey++;

}, 10000);

reSend(row.reqCode).then((res) => {

if (res.code === 0) {

this.$infoMsg.showInfoMsg(window.vm.$i18n.t("tips.issue"), this);

} else {

this.$infoMsg.showErrorMsg(res.msg, this);

}

});

},

}

这样就可以实现功能啦~

参考链接： https://www.jb51.net/article/238665.htm

相关链接

 您阅读本篇文章共花了：