【技术难题】el-table的全局数据排序实现示例,不受分页影响,以及异步请求带来的页面渲染问题

发布于:2025-06-29 ⋅ 阅读:(16) ⋅ 点赞:(0)

参考链接:https://blog.csdn.net/qq_35770559/article/details/131183121

问题代码

编辑页面detail.vue

<el-form title="列表信息" name="detail">
        <el-form>
          <el-form-item>
            <el-button
              type="cyan"
              icon="el-icon-plus"
              size="mini"
              @click="openProduct"
              >选择商品</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="inBillDetailTabless"
          :data="addup == '2' ? dataList : addList"
          max-height="450"
          stripe
          v-loading="loading"
          @sort-change="sortChange"
        >
  
          <el-table-column align="center" label="商品sku" width="180"
          prop="skuCode">
            <!-- <template slot-scope="scope">
              <el-form :model="scope.row">
                <el-form-item prop="skuCode">
                  <el-input
                    v-model="scope.row.skuCode"
                    clearable
                    :disabled="disabled"
                  ></el-input>
                </el-form-item>
              </el-form>
            </template> -->
          </el-table-column>
          <el-table-column align="center" label="商品名称" width="180"
          prop="skuName">
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="delDetail(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>


调用事件:
// 排序改变
    sortChange(row) {
   
      // 显示加载状态,提升用户体验
      this.loading = true;
      const {
    column, prop, order } = row
      //column表示选中排序列的详细信息,prop表示选中的拍序列,order表示选中拍序列的排序规则
      // 其他代码逻辑
      if (!order) return; // 无排序时直接返回
      if(order){
   
        console.log("===allMySort", row)

        allMySort({
   items:this.form.items,orderBy:order}).then((res) => {
   
          console.log(" res.data",JSON.stringify( res))
          // this.$nextTick()
          this.form.items = res.data;
          //根据addup类型更新列表
          // 列表查询方法
          if (this.addup == "1") {
   
            this.total=this.form.items.length
            this.addList = this.form.items.slice(
              (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
              this.queryParams.pageNum * this.queryParams.pageSize
            );
          }
          //if (this.addup == "1") this.form.items=array;