element-ui中表格设置正确的排序及设置默认排序
更新时间：2023年05月05日 11:10:53 作者：魔鬼君
表格中有时候会有排序的需求,下面这篇文章主要给大家介绍了关于element-ui中表格设置正确的排序及设置默认排序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
本文主要解决两个问题，第一个，在element-ui中，直接设置参数排序，达不到预期效果，预期是按照数字的大小进行排序；第二个，想对表格中某个字段设置默认的排序方式
现象：
直接设置在 el-table-column设置sortable=true,点击升序降序，结果是字符串的排序结果，不是预期的按照数字大小排序，结果如下
<el-table-column :sortable="true" label="学号" ></el-table-column>
要达到预期，需要设置sort-method
<el-table-column
:sortable="true"
:sort-method="sortMethod"
prop="no"
label="学号"
show-overflow-tooltip
></el-table-column>
// 按照数字大小排序 方法-
sortMethod(before, after) {
return Number(before.no) - Number(after.no);
},
// 按照数字大小排序 方法二
sortMethod(before, after) {
return before.no.localeCompare(after.no,"en-u-kn-true")
},预期结果如下
此时可能会有进一步的需求，前端设置默认的排序方式，例如：默认设置成升序，此处提供两种
1、初始化数据时，先排序再渲染（此处就不展示例子了，直接通过对数据排序就行）
2、通过调整组件参数，直接设置默认排序方式
在实践第二种设置默认排序方式的时候，遇到一个问题，直接设置default-sort={prop:'no'},基本满足默认排序的情况，但是会有不太完美的地方，初次进来点击排序表头空白处或者是点击到取消了排序效果时，不会恢复到默认的排序方式。
针对上面的情况，我们使用sort-change,监听到order不存在的时候，意思就是默认进来或者是排序效果被取消时，我们直接手动的设置一下排序方式为默认的，下面就是怎么实现
备注：order包含['ascending', 'descending', null]
参考官方文档： https://element.eleme.cn/2.10/#/zh-CN/component/table
<el-table
ref="table"
:data="tableData2"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
:header-cell-class-name="cellClass"
width="200"
border
:default-sort="{prop:'no'}"
@sort-change="sortChange"
>
sortChange({ column, prop, order }) {
if (!order) {
this.$refs.table.sort("no", "ascending");
}
},预期结果，初始化进入页面就默认的是升序
通过上面的操作，就能达到预期的效果，此文章只针对前端排序哦，个人愚见，欢迎大家指教
总结
到此这篇关于element-ui中表格设置正确的排序及设置默认排序的文章就介绍到这了,更多相关element-ui表格设置排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中点击url下载文件案例详解，此文需要注意若是文件的url存在跨域的情况，则可能会下载失败，因为fetch请求连接后，由于跨域，拿不到资源，也就无法执行后续的操作，此时是失败的,详细内容跟随小编一起看看吧2022-04-04
本篇文章主要介绍了vue 2.0 购物车小球抛物线的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue拖拽排序组件Vue-Slicksort，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue中的inject用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
浅谈一下Vue生命周期中mounted和created的区别
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期,在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,那么这些过程中，具体vue做了些啥，我们今天来了解一下2023-05-05
今天小编就为大家分享一篇解决vue.js提交数组时出现数组下标的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了基于elementUI实现图片预览组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了Vue3之路由跳转与参数获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章我们将一起学习vue.js实现绑定class和style样式，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论