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

1.ElementUI中table的sortable使用相关推荐

elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
VUE ElementUI中table框设置文字超出隐藏及设置提示框样式
当表格中某单元格的文字内容过多时,table中的每行的行高不一致导致风格不统一,这时需要用到ElementUI中table自带的属性show-overflow-tooltip使其内容均在一行显示,超出 ...
elementUI 中 table表格图片放大
elementUI 中 table表格图片放大当项目中表格的表格插入图片,需要放大查看图片, 可使用elementUI的组件 el-popover 弹出框,具体操作: <el-table- ...
elementUI中table中自定义修改时间格式2020-10-26T10:00:00
问题描述: 前端使用el-table查询到后台的数据的某一列时间列默认是标准UTC格式,如果想按照自己想显示的格式获取年月日和时分秒进行显示怎么办 ? 方法一: elementUI中的table提供了 ...
解决Element-ui中Table表格里的show-overflow-tooltip不兼容safari浏览器问题。
在使用element-ui过程中,需求:"列表中,文本内容过多,以划入显示全部内容展示",查看UI库,el-table提供了show-overflow-tooltip属性,但是在测 ...
(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例
Ⅰ.Element-ui 提供的Table组件与想要目标情况的对比: 1.Element-ui 提供Table组件情况: 其一.Element-ui 自提供的Table代码情况为(示例的代码): // ...
elementUI中table单元格的合并，通用版
之前曾发布过一篇文章关于单元格合并问题,但是通用性很差,切代码较长不美观,改进之后分享给大家,我这里使用的是vue3,vue2的小伙伴稍微改动一下即可如图:合并前想要效果: 话不多说直接上代码教大 ...
element-ui中table表格页面汇总固定在第一行
如图首先需要以下样式--注意加入/deep//deep/ .el-table {display: flex;flex-direction: column;}/deep/ .el-table__bod ...
关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
table 鼠标悬停时高亮背景颜色的修改 .el-table tbody tr:hover>td { background-color: #颜色 } 或 .el-table__body-wrap ...

1.ElementUI中table的sortable使用

ElementUI中table的sortable使用

1.业务分析

2.实现

具体代码

Mock模拟后端

1.ElementUI中table的sortable使用相关推荐

最新文章

热门文章