element-ui表格表头拖拽后排序方法的问题

Question

问题描述

表头在拖拽后,数据是改变了,但是排序方法没变?

问题出现的环境背景及自己尝试过哪些方法

在做element-ui table表头拖拽的效果,查看资料,使用改变数据顺序来模拟拖拽效果

相关代码

模板遍历代码:

<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>

表头数据格式:
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
      },
    ],

你期待的结果是什么？实际看到的错误信息又是什么？

在拖拽某个可以排序的列后,数据改变正确,排序方法没有变
比如:改变两个可以排序的列
没拖拽之前点击排序方法正确

拖拽之后,数据虽然改变了,但是方法没有变

请各路大神帮忙分析一下出现的原因,以及解决的方案,大恩不言谢~

Answer 1

:sort-method在遍历的时候只会渲染一次,不适合拖拽换位,这里需要换一个方法
在表头添加排序change的方法

该方法有三个参数,通过判断直接修改table里的:data值来实现排序.

Answer 2