问题

element排序采用官方给出的方案，按部就班后的产生的问题是：给出的排序有三种状态，descending、ascending 和null但是我只需要前面两种，目前的效果如下：

解决方法

使用两个变量分别保存上一次为null时的prop和保存之前的排序状态，实现效果：

代码：

html：

 <el-table:data="dataObj.dataList"ref="multipleTable"slot="empty":height="tableHeight"@sort-change="colChange":sort-orders="['ascending', 'descending']":default-sort="{prop: 'id', order: 'descending'}":cell-class-name="rowClass">

js（vue3的写法）

  const dataObj = reactive({searchObj: {id: '',planName: '',createUser: '',status: undefined,orderBy: 'id',orderType: 'desc',},dataList: [],searchPage: {pageSize: 10,pageNum: 1,},prevProp: 'id', // 保存上一次为null时的propsaveSort: 'descending',  // 保存之前的排序状态})

 // 排序const colChange = ({column, prop, order}) => {if (order && dataObj.prevProp !== prop) {dataObj.prevProp = prop}if (!order) {order = dataObj.saveSort === 'descending' ? 'ascending' : 'descending'that.$refs.multipleTable.sort(dataObj.prevProp, order)prop = dataObj.prevProp}dataObj.saveSort = orderdataObj.searchObj.orderBy = propdataObj.searchObj.orderType = dataObj.saveSort === 'descending' ? 'desc' : 'asc'if (column) getDataList() // 获取数据的方法}// 重置const resetData = () => {dataObj.searchPage.pageSize = 10dataObj.searchPage.pageNum = 1dataObj.searchObj = {}that.$refs.multipleTable.sort('id', 'descending')}

Element Plus 表格后端排序相关推荐

Vue之element table 后端排序实现
Vue之element table 后端排序实现 1.如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段 ...
php 表格后台排序,element表格的后台排序
element(1)表格的后台排序 ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取 ...
element Table表格实现前x行恒展示，不会被折叠，设置点击表头按钮排序。
table表格前X行恒展示不会被折叠. 表头筛选按钮示意图: // data --渲染的数据(每一列每一行),请求回来的. 默认通过字段名和每一个headers对象中每一个prop来对应起来渲染数据的 ...
element 树形表格行列转换（行列转换系列2）
我们上篇文章写的是关于element普通表格的行列转换,下面我们开始写element树形表格的行列转换实现效果: 首先:我们通过element的官方文档中可以看出.当row 字段中包含childre ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
element-ui表格sort-change排序，当table部分数据为空null时，解决排序不起作用/错乱/不整齐的问题（支持字符串，数字排序）
当表格排序列的数据出现空数据(null)的时候,组件自带的排序功能就不正常了,出现的问题如图: 排序生效,但不整齐,中间有空行. 思路一:重新排一个新数组:遍历表格data,使其含空的数据堆在一块,非 ...
vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
element 普通表格行列转换（行列转换系列1）
因为用户的使用习惯.最近小白新完成的一个系统,里面使用的element的表格基本都是行列的表格,因此就想着整理一下,其中包括了,后端应该给的数组格式,以及前端如何渲染这就是渲染后的样式首先在ele ...

Element Plus 表格后端排序

element 表格后端排序（element和element plus通用）

问题

解决方法

Element Plus 表格后端排序相关推荐

最新文章

热门文章