前端使用elemnt-ui自定义排序

A-飞龙在天

于 2019-11-03 18:54:51 发布

阅读量1.2k

点赞数

本文链接：https://blog.youkuaiyun.com/HuangZeJunXXX/article/details/102885444

版权

本文介绍了如何在前端使用Element UI的sort-change事件和sortable属性实现Table表格中指定列（如型号和创建时间）的排序。通过监听sort-change事件并在方法中处理排序逻辑，特别是对时间格式的字段进行时间戳转换，以确保正确比较。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原创
Element Ui之利用sort-change事件及sortable属性实现Table表格指定列的排序
2019-08-29 17:00:58 杨丫丫 阅读数 707更多
分类专栏： Element Ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yangfan_357/article/details/100140641
表格的表现形式如下：
注意：该实例介绍的为根据“型号”进行排序，或者根据"创建时间"进行排序！！！

具体步骤如下：
1.创建table，绑定data，绑定列名prop，绑定监听事件sort-change

<el-table :data=“tableData” border style=“width: 100%” v-loading=“loading” @sort-change=“changeTableSort”>

{ {scope.$index + 1}}

2.初始化列表数据tableData及加载状态loading

data() {
return {
tableData: [
{
model:2,
modelName:“水浸”,
description:“ccc”,
createTime:“2019-07-17T06:55:14.000+0000”
},
{