element-ui的el-table局部刷新

皮卡大人

已于 2022-07-19 09:59:27 修改

阅读量1.3w

点赞数

文章标签： elementui 前端

于 2022-02-25 16:41:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46057218/article/details/123135329

版权

这篇博客主要讨论了一个Vue.js应用中的交互设计问题，即如何在表格中点击按钮后将其转换为进度条并实时更新状态。当用户点击“获取最新状态”按钮时，该按钮应显示为进度条，并在后台获取数据的同时进行进度展示。通过`this.$set(this.tableData, index, row)`来更新表格数据，但遇到了表格未重新渲染的问题。作者提供了`handlePicture`和`progressSpeed`两个方法来处理这个过程，但遇到了进度条在达到100%后状态未正确恢复的bug。博客内容深入探讨了这个问题的解决思路和代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍：有一个简单的需求，一个表格点击一个单元格的按钮后，按钮变成进度条。
问题：如果只是用一个变量，然后配合v-if使用，一整列都会变成进度条。
想法：把那个变量渲染进去列表的每一行。但是…问题又出现了，值变了，但是表格没有被重新渲染。
重点：this.$set(this.tableData, index, row)，更新表格这一行的值。理解这句代码的意思，后面的可以不看。

随便放点前端代码就很长了，不放又清除概况，简单看看吧。直接看el-progress那个标签的附近的，其他的瞅一下知道大概就好。

<el-table
              ref="theTable"
              :data="tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()))"
              class="content-datasheet-table"
              :cell-style="columnStyle"
            >
              <el-table-column label="开关名称" prop="name" width="100px" align="center"> </el-table-column>
              <el-table-column label="开关ID" prop="sensorId" width="100px" align="center"> </el-table-column>
              <el-table-column label="电压值（V）" prop="voltage" width="100px" align="center"> </el-table-column>
              <el-table-column label="电流值(A)" prop="current" width="100px" align="center"> </el-table-column>
              <el-table-column label="功率值（W）" prop="power" width="100px" align="center"> </el-table-column>
              <el-table-column label="状态图" align="center">
                <!-- eslint-disable-next-line -->
                <template slot-scope="scope">
                  <viewer style="transform:rotate(-90deg)" rotateTo="-90">
                    <img :src="viewPicture(scope.row)" min-width="70" height="70" :key="scope.$index" />
                  </viewer>
                </template>
              </el-table-column>
              <el-table-column label="刷新时间" prop="statusTime" width="160px" align="center"> </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-progress
                    v-if="scope.row.progressBar"
                    :text-inside="true"
                    :stroke-width="18"
                    :percentage="scope.row.speed"
                    status="success"
                  ></el-progress>
                  <el-button size="mini" v-else @click="updateConfirm(scope.$index, scope.row)">获取最新状态</el-button>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <!-- eslint-disable-next-line -->
                <template slot="header" slot-scope="scope">
                  <el-input v-model="search" size="medium" clearable placeholder="输入开关ID搜索" />
                </template>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-color="#2d8cf0"
                    nactive-color="#ff4949"
                    :active-value="true"
                    :inactive-value="false"
                    active-text="闭合"
                    inactive-text="断开"
                    @change="switchConfirm(scope.row.status, scope.row.sensorId)"
                  />
                </template>
              </el-table-column>
            </el-table>

前端页面显示图：点击获取最新状态之后，获取变成进度条，开始跑进度。
在这里插入图片描述

    // 更新当前某个开关的最新状态
    handlePicture(index, row) {
      let params = "sensor_id=" + row.sensorId;
      this.progressSpeed(index, row);
      newestStatus(params).then(res => {
        row.speed = 100;
        this.$set(this.tableData, index, row);
        setTimeout(() => {
          row.progressBar = false;
          this.switchData();
        }, 3000);
      });
    },

    // 进度条刷新
    progressSpeed(index, row) {
      row.speed = 0;
      row.progressBar = true;
      const sp = setInterval(() => {
        console.log();
        if (row.speed >= 99 ) {
          clearInterval(sp);
        } else {
         row.speed++; 
        }
        this.$set(this.tableData, index, row);
      }, 600);
    },