element-ui表格表頭拖拽后排序方法的問題

問題描述

表頭在拖拽后,數(shù)據(jù)是改變了,但是排序方法沒變?

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

在做element-ui table表頭拖拽的效果,查看資料,使用改變數(shù)據(jù)順序來模擬拖拽效果

相關(guān)代碼

模板遍歷代碼:

<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: #409EFF;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: #409EFF;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>

表頭數(shù)據(jù)格式:
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: '預(yù)計銷售金額',
        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: '領(lǐng)導層',
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      }, {
        sAtt: 'foperatorName',
        sName: '操作層',
        bool: true,
        minWidth:120,
        sortable: false,
        sortMethod: null
      }, {
        sAtt: 'fpredictBidTime',
        sName: '預(yù)計招標時間',
        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
      },
    ],