数据展示网站主题wordpress吉它多肉

ElementUI中table的sortable使用

ElementUI-table

1.业务分析

将相对应的字段进行升序或者降序，在后台管理系统中，后端返回的指定的页面的数据，所有后端将排序做好，前端传：排序字段和排序方法

效果：默认升序，点击排序的icon，上箭头升序，下箭头降序

2.实现

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

elementUI-table

具体代码

<template><div style="padding:20px;height:100%" class="resolve"><el-table:data="tableData"stripeborder@sort-change="changeTableSort"style="width:100%;"><el-table-column type="selection" width="55"> </el-table-column><el-table-column type="index" width="50" label="序号"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-columnprop="address"label="地址"width="200"></el-table-column><el-table-column prop="payDate" label="payDate"></el-table-column><el-table-columnprop="come"label="come"sortable="custom"></el-table-column><el-table-column prop="pay" label="pay"></el-table-column><el-table-column prop="money" label="money"></el-table-column></el-table><div class="block"><el-paginationbackgroundlayout="prev, pager, next":total="50":page-size="5":current-page="currentPage"@current-change="handlePageCurrentChange"></el-pagination></div></div>
</template><script>
import { getHomeData } from "@/api/index";
export default {name: "",data() {return {tableData: [],currentPage: 1,fieldName: "",sortMethod: "",};},mounted() {this.getData();},methods: {getData() {var data = {pageIndex: this.currentPage,pageSize: 10,come: this.sortMethod, // 排序的字段：排序的方式(升序/降序)};getHomeData(data).then((res) => {console.log(res);console.log("table", res.data.content);if (res.code == 0) {this.tableData = res.data.content;}});},handlePageCurrentChange(value) {console.log("value", value);this.currentPage = value;this.getData();},// 排序changeTableSort(column) {console.log("column", column);// this.fieldName = column.prop;var sortingType = column.order;sortingType == "ascending"? (this.sortMethod = "ASC"): (this.sortMethod = "DESC");this.getData(this.sortMethod);},},
};
</script><style scoped>
.resolve {overflow-y: auto;
}
.block {margin-top: 20px;
}
</style>

在需要排序的字段上增加sortable=“custom”,el-table增加@sort-change事件监听排序

Mock模拟后端

Mockjs

npm install --save mockjs

// Mock/mock.js
import Mock from "mockjs";
let list = []; //保存数据for (var i = 0; i < 100; i++) {//循环100次list.push({id: Mock.Random.guid(),name: Mock.Random.cname(),address: Mock.mock("@county(true)"), //北京市 昌平区 北七家镇payDate: Mock.Random.datetime(),payType: Mock.Random.integer(0, 8), //类型 【1，  8】come: Mock.Random.integer(0, 9999),pay: Mock.Random.integer(0, 9999),money: Mock.Random.integer(0, 9999),});
}export default Mock.mock(/\/user\/list/, "post", (data) => {console.log("data", data);var info = JSON.parse(data.body);var [index, size, come, total] = [info.pageIndex,info.pageSize,info.come,list.length,];var len = total / size;var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len;console.log('come',come);if (!come || (come && come == "ASC")) {list.sort(function(a, b) {return a.come - b.come;});} else if (come == "DESC") {list.sort(function(a, b) {return b.come - a.come;});}var newDataList = list.slice((index - 1) * size, index * size);return {code: "0",message: "success",data: {pageIndex: index,pageSize: size,content: newDataList,total: total,totalPages: totalPages,},};
});

// main.js
import './mock/mock'

request axios

npm install --save axios

// utils/request.js
//请求工具类
import axios from 'axios'//1.创建server
const server = axios.create({baseURL:'localhost:8080',timeout:5000
})
//2.请求拦截
server.interceptors.request.use(config=>{return config
})
//3.响应拦截
server.interceptors.response.use(res=>{return res.data
})export default server

api

//接口管理
import request from '../utils/request'//1.获取list数据
export function getHomeData(data){return request({url:'/user/list',method:'post',data:data})
}