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或組件狀態沒有更新,比如下圖:

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章