elementUI的table表格改变数据不更新问题解决

小半 • 2023年1月18日下午6:14 • 前端开发 • 阅读 579

需求：
table表格中给按钮添加10秒倒计时；
点击按钮后将按钮改为禁止点击状态，10秒后恢复正常
如图：

本以为是一个很简单的需求，直接就写了，结果发现没效果，最后通过打印该行数据发现：行数据值已经改变了但是页面上还是false

错误代码：

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

解决方法：

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

修改后代码：

    <el-table
      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"
    >
      <template slot="empty">
        <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
      </template>
      <el-table-column prop="reqCode" :sortable="true" label="设备" />
      <el-table-column prop="userCode" :sortable="true" label="消息" />
      <el-table-column prop="apiType" :sortable="true" label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.apiType == 2">转储单入库</span>
          <span v-else-if="scope.row.apiType == 3">排程发料</span>
          <span v-else-if="scope.row.apiType == 5">入库上架</span>
          <span v-else-if="scope.row.apiType == 6">出库下架</span>
          <span v-else-if="scope.row.apiType == 11">订单发料完成</span>
          <span v-else>{{ scope.row.apiType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('storagePos.operation')"
        width="150px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            :disabled="scope.row.btnDisabled"
            icon="el-icon-tickets"
            size="mini"
            type="primary"
            @click="output(scope.$index, scope.row)"
          >
            重发
          </el-button>
        </template>
      </el-table-column>
    </el-table>

 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);
        }
      });
    },
}