摘要 该代码达成了一个商品列表的全局排序功能。前端使用Vue.js框架，通过Element UI的表格组件展示商品数据，当用户点击表头排序时触发sortChange方法。该方法发送排序请求到后端，并根据返回结果更新表格资料。后端采用Java Spring Boot框架，接收排序参数后使用自定义比较器CustomComparator对商品列表进行升序或降序排列，末了返回排序后的结果

参考链接：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;