el-table实现多列排序
业务需求el-table 需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留，但是el-table默认是单列排序。
页面
<el-row>
<el-table id="tableData" :data="tableData" ref="table" overflow:auto :fit="true" class="fit_tbl" :border=true
:row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style="font-size: 10px" v-loading="tblLoading"
:header-cell-class-name="handleHeaderClass"
@header-click="handleHeaderCLick"
@sort-change="handleTableSort">
<el-table-column prop="reportPeriod" width="100" label="月份" align="center" key="2">el-table-column>
<el-table-column sortable="custom" prop="indName" width="100" label="所属行业" align="center" key="3">el-table-column>
<el-table-column prop="stockCode" width="100" label="股票代码" align="center" key="4">el-table-column>
<el-table-column sortable="custom" prop="stockName" width="100" label="股票名称" align="center" key="5">el-table-column>
<el-table-column sortable="custom" prop="organName" width="100" label="券商名称" align="center" key="6">el-table-column>
<el-table-column prop="authorName" width="150" label="研究员" align="center" key="7">el-table-column>
<el-table-column prop="recoReason" label="推荐原因" align="left" key="8">el-table-column>
el-table>
<el-pagination
:page-size=size
:page-sizes = " [10, 20, 30, 40, 50, 100] "
@current-change="handleSearch()"
@size-change = "handleSizeChange"
:current-page.sync="page"
layout="total, sizes, prev, pager, next, jumper"
:total="tmpTotal">
el-pagination>
el-row>
/**
* @header-click="handleHeaderCLick"
* 点击表头文字触发的监听器
*
* @sort-change="handleTableSort"
* 点击表头排序标签触发定时器
*/
data : {
tmpTotal: 0,
tableData: [],
tblLoading: false,
ordersList: [],
},
// 上面缺点是只能通过点击表头切换排序状态，点击小三角排序不会触发，处理sort-change事件和点击表头一样，列表排序
handleTableSort({ column }) {
// 如果表格的sortable属性不等于custom说明是不需要排序的，直接返回
if (column.sortable !== 'custom') {
return;
}
if (!column.multiOrder) {
// 如果multiOrder为空说明还没有排序，设置默认升序
column.multiOrder = 'descending'
} else if (column.multiOrder === 'descending') {
// 如果当前multiOrder为升序，再次点击设置为降序
column.multiOrder = 'ascending'
} else {
// 如果当前multiOrder为降序，再次点击设置为不排序
column.multiOrder = ''
}
this.handleOrderChange(column.property, column.multiOrder)
},
/**
* 向数组ordersList中存放或修改表头排序信息
*
* @param orderColumn
* @param orderState
*/
handleOrderChange (orderColumn, orderState) {
let result = this.ordersList.find(e => e.orderColumn === orderColumn)
if (result) {
result.orderState = orderState
} else {
this.ordersList.push({
orderColumn: orderColumn,
orderState: orderState
})
}
// 调接口查询，在传参的时候把ordersList进行处理成后端想要的格式
this.handleSearch()
},
/**
* 向后端发送请求，获取排序后的数据
*/
handleSearch: function () {
vue.tblLoading = true;
let orderObject = {};
// 处理存放要排序的表头信息
if (!this.isEmpty(this.ordersList)) {
for (let i = 0; i < this.ordersList.length; i++) {
let temp = this.ordersList[i];
if (temp.orderState === "ascending") {
// 降序
orderObject[temp.orderColumn] = "asc";
}
if (temp.orderState === "descending") {
// 升序
orderObject[temp.orderColumn] = "desc";
}
}
}
// 请求发送
ais_ajax({
url:'/analysis/inv-fd/goldStock/queryGoldStockInfo',
data : {
orderObject: JSON.stringify(orderObject)
},
type:'post',
successFn:function(data){
vue.tmpTotal = data.total;
vue.tableData = data.rows;
vue.tblLoading = false;
}
});
},
后端处理
@RequestMapping(method = RequestMethod.POST, value = "queryGoldStockInfo")
public String queryGoldStockInfo(HttpServletRequest req) {
String orderObject = this.getStrParam(req, "orderObject");
int page = this.getIntParam(req, "page", 1);
int size = this.getIntParam(req, "size", 10);
// 解析排序数据，手动拼接排序的sql
StringBuilder sb = new StringBuilder();
JSONObject object = JSON.parseObject(orderObject);
if (!object.isEmpty()) {
if (object.containsKey("organName")) {
sb.append("organName ").append(object.getString("organName")).append(",");
}
if (object.containsKey("indName")) {
sb.append("indName ").append(object.getString("indName")).append(",");
}
if (object.containsKey("stockName")) {
sb.append("stockName ").append(object.getString("stockName"));
}
orderList = sb.toString();
if (orderList.lastIndexOf(",") == (orderList.length() - 1)) {
orderList = orderList.substring(0, orderList.lastIndexOf(","));
}
}
Map<String, Object> map = new HashMap<>();
map.put("orderList", orderList);
PageInfo<GogoalGoldStockVO> list = gogoalGoldStockService.queryGoldStockInfo(map, page, size);
List<GogoalGoldStockVO> all = list.getList();
JSONObject obj = new JSONObject();
JSONArray rows = (JSONArray) JSONArray.toJSON(all);
obj.put("rows", rows);
obj.put("total", list.getTotal());
return obj.toJSONString();
}
XML文件，其中 orderList 就是手动拼接的sql
注意：这里要用sql注入的方式（${ }）将orderList填充到查询语句的最后，不然这里的orderList会先被解析再填充
<select id="queryGoldStockInfo" resultType="com.analysis.investment.foundation.db.mybatis.entity.ods.GogoalGoldStockVO">
select a.stock_code stockCode, a.stock_name stockName, a.reco_reason recoReason, a.report_year reportYear,
a.report_period reportPeriod, a.organ_name organName, a.author_name authorName, b.ind_name indName
from ais_inv_ods.gogoal_gs_rpt_goldstock a
inner join t_market_stockind b on (a.stock_code = b.gpdm)
<where>
<if test="year != null and year != ''">
AND a.report_year = #{year}
if>
<if test="month != null and month != ''">
AND a.report_period = #{month}
if>
<if test="broker != null and broker != ''">
AND a.organ_name = #{broker}
if>
<if test="stock != null and stock != ''">
AND a.stock_code = #{stock}
if>
<if test="industry != null and industry != ''">
AND b.ind_index_code = #{industry}
if>
where>
<if test="orderList != null and orderList != ''">
order by ${orderList}
if>
select>