el-table自定义排序

html部分代码

–default-sort 属性设置默认的排序列和排序顺序
–sort-change 在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据

<el-table v-loading="loading" :data="CurrencyList" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange"  
		   @sort-change="sort_change"  :default-sort = "{prop: 'costPrice', order: 'descending'}">
			<el-table-column type="selection" min-width="3%"></el-table-column>
		    <el-table-column label="序号" align="center" min-width="5%">
		        <template slot-scope="advertscope">
		            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + advertscope.$index + 1}}</span>
		        </template>
		    </el-table-column>
			<el-table-column prop="name" align="center" label="商品名称"min-width="8%" :show-overflow-tooltip='true'></el-table-column>
			<el-table-column prop="grandName" align="center" label="服务分类" min-width="8%"></el-table-column>
			<el-table-column prop="categoryparentIdDesc" align="center" label="一级分类" min-width="8%"></el-table-column>
			<el-table-column prop="categoryIdDesc" align="center" label="二级分类" min-width="8%"></el-table-column>
			<el-table-column align="center" label="现价" min-width="8%" sortable="custom"  prop="customSortColumn">
				<template slot-scope="scope" sortable="custom">
					<span v-if="scope.row.standards=='1'&&scope.row.ggList.length>0">{{scope.row.ggList[0].xj}}</span>
					<span v-else>{{scope.row.prePrice}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="成本价" min-width="8%" sortable="custom" prop="costPrice">
				<template slot-scope="scope" sortable="custom">
					<span v-if="scope.row.standards=='1'&&scope.row.ggList.length>0">{{scope.row.ggList[0].cbj}}</span>
					<span v-else>{{scope.row.costPrice}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="city" align="center" label="地区" min-width="16%"></el-table-column>
			<el-table-column prop="updateTime" align="center" label="上传时间" min-width="12%">
				<template slot-scope="scope">
				    {{ formatToDate(scope.row.updateTime) }}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" min-width="10%">
			  <template slot-scope="scope">
				<el-button 
				  size="mini"
				  type="text"
				  icon="el-icon-edit"
				  @click="handleUpdate(scope.row)"
				>编辑</el-button>
				<el-button 
				  size="mini"
				  type="text"
				  @click="handleDetails(scope.row)"
				>查看</el-button>
			  </template>
			</el-table-column>
		  </el-table>
		  
		  <el-pagination
		  	  :current-page.sync="queryParams.pageNum"
		  	  @size-change="handleSizeChange"
		  	  @current-change="handleCurrentChange"
		  	  :page-sizes="[10, 20, 30, 50]"
		  	  layout="total, sizes, prev, pager, next, jumper"
		  	  :total="total">
		  </el-pagination>

method部分代码

sort_change({ column, prop, order }) {
      if (prop === 'customSortColumn') {	
        this.CurrencyList.sort((a, b) => {
          const valueA = (a.standards === '1' && a.ggList.length > 0) ? a.ggList[0].xj : a.prePrice; 
          const valueB = (b.standards === '1' && b.ggList.length > 0) ? b.ggList[0].xj : b.prePrice;
          if (order === 'ascending') {
            return valueA - valueB;
          } else if (order === 'descending') {
            return valueB - valueA;
          }
          return 0;
        });
      }
	  if (prop === 'costPrice') {
        this.CurrencyList.sort((a, b) => {
          const valueA =  Number((a.standards === '1' && a.ggList.length > 0) ? a.ggList[0].cbj : a.costPrice);
          const valueB = Number((b.standards === '1' && b.ggList.length > 0) ? b.ggList[0].cbj : b.costPrice);
          if (order === 'ascending') {
            return valueA - valueB;

          } else if (order === 'descending') {
            return valueB - valueA;
          }
          return 0;
        });
      }
 }