problem description

after the header is dragged, the data changes, but the sorting method remains the same?

the environmental background of the problems and what methods you have tried

in the element-ui table header drag effect, view the data, and use to change the data order to simulate the drag effect

related codes

template traversal code:

<el-table
        border
        ref="singleTable"
        :data="values"
        v-loading="loading2"
        element-loading-text=""
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
        @header-click="moreShow($event)"
        height="100%"
        width="100%"
        :cell-class-name="cellClassName"
        :header-cell-class-name="headerCellClassName"
        :row-style="getRowClass">
        <el-table-column label="" min-width="130px" sortable fixed="left" prop="fcustomerName"></el-table-column>
        <el-table-column label="" fixed="left" prop="fnewBusinessName"></el-table-column>
        <el-table-column prop="schemeVoList" label="" fixed="left" min-width="120">
          <template slot-scope="scope">
            <a
              :href="URL+scope.row.schemeVoList[0].fileUrl"
              download
              style="color: -sharp409EFF;cursor: pointer"
              title=""
              v-if="scope.row.schemeVoList[0]">
              {{scope.row.schemeVoList[0].fileName}}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="quoteVoList" label="" fixed="left" min-width="120">
          <template slot-scope="scope">
            <a
              :href="URL+scope.row.quoteVoList[0].fileUrl"
              download
              style="color: -sharp409EFF;cursor: pointer"
              title=""
              v-if="scope.row.quoteVoList[0]">
              {{scope.row.quoteVoList[0].fileName}}
            </a>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item,index) in allTableData"
          v-if="item.bool"
          :prop="item.sAtt"
          :label="item.sName"
          :sortable="item.sortable"
          :sort-method="item.sortMethod"
          :key="index"
          :min-width="item.minWidth"
          :column-key="index.toString()"
          :render-header="renderHeader">
        </el-table-column>
        <el-table-column label="" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="warning" icon="el-icon-view"  @click="traceShow(scope.row)"
                       style="padding: 7px">
            </el-button>
            <el-button size="small" type="primary" icon="el-icon-edit" @click="editBusShow(scope.row)"
                       style="padding: 7px">
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="..." align="center" width="50" fixed="right"></el-table-column>
      </el-table>

header data format:
allTableData: [

      {
        sAtt: "followMan2",
        sName: "",
        bool: true, //true  false 
        minWidth:120,
        sortable: true,  //
        sortMethod: null  //
      },
      {
        sAtt: "assessList2",
        sName: "",
        bool: true,
        minWidth:273,
        sortable: false,
        sortMethod: null
      },
      {
        sAtt: "opponentVoList2",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      },
      {
        sAtt: "fpredictMoney",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      },
      {
        sAtt: "fsellStage2",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: true,
        sortMethod: this.fsellStage2
      },
      {
        sAtt: "fnewPredictMoney",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      },
      {
        sAtt: "fprocurementMethod",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      }, {
        sAtt: "fbidType",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      },
      {
        sAtt: "fleaderName",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      }, {
        sAtt: "foperatorName",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      }, {
        sAtt: "fpredictBidTime",
        sName: "",
        bool: true,
        minWidth:130,
        sortable: true,
        sortMethod: this.fpredictBidTime
      }, {
        sAtt: "fimportantLevel2",
        sName: "",
        bool: true,
        minWidth:110,
        sortable: true,
        sortMethod: this.fimportantLevel2
      }
      , {
        sAtt: "fvisitRecord",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      }, {
        sAtt: "fnextTime",
        sName: "",
        bool: true,
        minWidth:160,
        sortable: true,
        sortMethod: this.fnextTime
      },
      {
        sAtt: "fvisitNextStep",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      },
      {
        sAtt: "flastFollowTime",
        sName: "",
        bool: true,
        minWidth:130,
        sortable: true,
        sortMethod: this.flastFollowTime
      },
      {
        sAtt: "fremark",
        sName: "",
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      },
    ],

what result do you expect? What is the error message actually seen?

after dragging a sortable column, the data changes correctly, and the sorting method does not change
for example, change two sortable columns
Click the sorting method correctly

,,

ask all the great gods to help analyze the causes of the emergence and the solutions. Don"t thank you for your kindness.