vue更新数据页面不刷新数据

<el-table
      @cell-mouse-enter="hoverRow"
      v-if="tableData.length > 0"   //这里是关键
      @cell-mouse-leave="leaveRow"
      @sort-change="sortChange"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      class="table-style"
      :data="tableData"
    >
getTableData() {
      this.tableData = [];  //这里也是关键
      let req = {
        curPage: this.currentPage,
        pageSize: this.pageSize,
        startDate: this.pickerVal[0],
        endDate: this.pickerVal[1],
        partnerName: this.inputVal,
        orderBy: this.orderBy, //排序字段 1券发放量 2有效客户数
        orderType: this.orderType //排序方式 0正序 1倒序
      };
      this.$axios
        .get("/manage/partner/info/list", { params: req })
        .then(resp => {
          if (resp.data.responseCode == 200) {
            if (resp.data.data) {
              this.tableData = resp.data.data;
              this.totalNum = resp.data.totalCount;
              this.tableData.map((item, index) => {
                item.showRightOp = false;
                item.index = index;
              });
            }
          }
        });
    },

请求数据时,先将之前的数据清空,DOM在没有数据的时候先不加载,数据更新后再加载DOM

适用于表格数据刷新了,但是表格内的根据新数据变化的DOM或组件状态没有更新,比如下图:

在这里插入图片描述

原创文章 65 获赞 73 访问量 7739

猜你喜欢

转载自blog.csdn.net/qq_43592064/article/details/105726279