【VUE+elementUI+JAVA】elementUI的＜el-table＞组件VUE自定义排序+后台排序含分页完整版

前言

最近要实现对table按列要进行排序的需求， 故此整理一下从前端到后端整个的完整逻辑，供大家参考。

开发环境

项目为前后端分离项目，使用的是Ruoyi-VUE版前后端分离框架

前端部分

html内容:

代码如下：

<el-table :data="tableData"style="width: 100%"@sort-change="sortChange"><el-table-column prop="id"label="ID"fixedsortable="custom"width="60"></el-table-column><el-table-column prop="shardNum"width="100"label="Shard编号"></el-table-column><el-table-column prop="store"width="140"sortable="custom"label="Shard大小"></el-table-column> </el-table><!-- 分页逻辑实现 --><pagination v-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getShardStore" />

注意的点：

@sort-change="sortChange"sortable="custom"

import js

import {getShardStore } from "@/api/kirara/elastic_search";

data内容：

data () {return {// 查询参数 分页参数和orderBy和是否desc参数queryParams: {pageNum: 1,pageSize: 10,orderBy: undefined,isAsc: undefined,},// table数据tableData: [],// 数据条数total: 0,

motheds内容：

getShardStore()方法

async getShardStore () {const that = this;getShardStore(that.queryParams).then((response) => {that.total = response.total;that.tableData = response.rows;});},

sortChange()方法

sortChange (column) {//打印可以分别得到上下箭头的数据console.log(column);if (column.order === 'descending') {this.queryParams.orderBy = column.propthis.queryParams.isAsc = 'desc'} else {this.queryParams.orderBy = column.propthis.queryParams.isAsc = 'asc'}this.queryParams.pageNum = 1;this.getShardStore(this.queryParams);//查询列表方法},

Ajax请求后台js代码

// 查看shard storeexport function getShardStore (queryParams) {return request({url: '/api/v1/elastic-search/index/shard-store',method: 'get',params: queryParams})}

后台部分

crontroller层

@GetMapping(value ="/index/shard-store" )public TableDataInfo indexShardStore(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam(defaultValue = "") String indexName,@RequestParam(defaultValue = "") String node,@RequestParam(defaultValue = "") String disk,@RequestParam(value = "orderBy", defaultValue = "id") String orderBy,@RequestParam(defaultValue = "isAsc") String isAsc) {startPage();List<Shard> pager = elasticsearchService.getShardStore(pageNum, pageSize, indexName, node, disk, orderBy, isAsc);return getDataTable(pager);}

service层

public List<Shard> getShardStore(Integer page, Integer size, String indexName, String node, String disk, String orderBy, String desc) {Map<String, Object> params = new HashMap<String, Object>();params.put("node", node);params.put("disk",disk);params.put("indexName", indexName);params.put("orderBy", orderBy);params.put("desc", desc);Pager<Shard> pager = new Pager<Shard>();List<Shard> shardStore = elasticSearchMapper.getShardStore(params);return shardStore;}

mapper层

List<Shard> getShardStore(Map<String, Object> params);

xml

<resultMap type="com.ruoyi.kirara.domain.entity.Shard" id="shard"><result property="id" column="id"/><result property="indexName"column="index_name"/><result property="store"column="store"/><result property="prirep"column="prirep"/><result property="ip"column="ip"/><result property="disk"column="disk"/><result property="uuid" column="uuid"/><result property="docs" column="docs"/><result property="node" column="node"/></resultMap><sql id="selectShardStore">SELECT c.id,c.index_name,c.uuid,c.shard_num,c.store,c.prirep,c.docs,c.ip,d.disk,c.nodeFROM(SELECT a.index_name,a.shard_num,a.ip,b.uuid,a.prirep,a.store,a.id,a.docs,a.nodeFROM es_shard aLEFT JOIN es_index b ON a.index_name = b.index_name)cLEFT JOIN es_shard_store d ON c.uuid = d.index_uuidAND d.shard_num = c.shard_numAND d.node = c.ip</sql><select id="getShardStore" resultMap="shard" useCache="false" flushCache="true"><include refid="selectShardStore"/><where><if test="indexName != null and indexName != ''">AND c.index_name like concat('%', #{indexName, jdbcType=VARCHAR}, '%')</if><if test="node != null and node != ''">AND d.node = #{node, jdbcType=VARCHAR}</if><if test="disk != null and disk != ''">AND d.disk = #{disk, jdbcType=VARCHAR}</if></where><if test="orderBy != null and orderBy!= ''">order by${orderBy}<if test="desc == 'desc'">desc</if></if></select>

总结

到此完成了从前端到后端的的分页和按列排序功能。