element中使用表格的排序时无法排序

最新推荐文章于 2022-12-27 09:42:32 发布
最新推荐文章于 2022-12-27 09:42:32 发布
阅读量626 收藏
点赞数 2
文章标签： elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwyjw/article/details/122369983
版权

element表格无法排序

在今天写管理系统时由于自己只注重于表面，并未深读官方文档造成自己在一个简单的问题上耗费时间较长，特此记录下以防大家遇到时可以避雷
项目需要排序功能，但是在后端传回的数据中是排序好的但是自己在渲染完之后却发现不是已经排序好的，就猜疑是不是自己在某些地方又重新渲染了一遍，但是浪费半天也没找到，最后也是无奈了 去看官方文档，才发现是自己的问题，下面划重点

在咱们需要使用 sort-change 这个事件时我们首先需要在里面写上sortable="custom"这个属性才能达到咱们想要的效果

希望小伙伴们在遇到这个问题是也能看到这个文章，加油

xwyjw
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element ui 中 table 排序 sortable失效问题
weixin_48371382的博客
04-02 916
sortable效果：（不生效） <el-table-column label="位置" sortable align="center" width="180"> <template slot-scope="scope"> <span style="margin-left: 10px">首页顶部banner{{ scope.row.priority }}号位</span> </templa
element table组件排序失效 sort-change中prop不存在，导致排序不生效
最新发布
红烧咸咸鱼
05-16 216
element table组件排序失效 sort-change中prop不存在，导致排序不生效
ivew | element ui- 关于table组件自定义sortMethod排序不生效或错误问题处理
weixin_34056162的博客
07-03 4397
最近项目需求需要，需要对表格列进行自定义排序，用的是iview的组件，看了文档，table 排序这部分，但是没有给出相关例子。以为不难搞的，是不难搞，就是折腾了好一会。。。 Iview table 排序 data () { return { columns5: [ { ...
Element表格---sortable失效
pei_y_y的博客
10-14 1223
修改前： <el-table-column sortable label="支付日期" width="300" align="center" > <template #default="scope"> <i class="el-icon-time"></i> //时间图标 <span style="margin-left: 10px">{{ scope.
elementUI之表格排序失效，表格宽度可拖拽变宽变窄
hangGe0111的博客
04-28 1697
在elementUI官网有介绍到给表格排序的方法 之所以失效是因为我没在<el-table-column>上加上prop='stime' 原本，如果内容需要<template>来存放，在<el-table-column>上加prop就没有意义，但在使用sortable排序时，prop是起作用的 说明： 1.转载地址：https://blog.csdn.net/Annexiaobin/article/details/103067101 ...
关于使用elementUI自定义排序失效问题
weixin_54641063的博客
04-14 1277
关于使用elementUI自定义排序失效问题、 项目有这样一个需求：做报表的时候要整张表进行排序，使用elementUI的sortable只是在本页分页，需要在 Table 上监听sort-change事件 tableChange(column){ if (column.order == 'descending') { this.columnOrder=false }else{ this.columnOrder=true } this.col
vue element table 表格请求后台排序的方法
12-29
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 <el-...
vue.draggable实现表格拖拽排序效果
01-19
本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下 主要使用vuedraggable和sortablejs两个组件。 1、安装组件 npm install vuedraggable npm install sortablejs 2...
JS实现HTML表格排序功能
12-29
本文实例为大家分享了JavaScript实现HTML表格排序功能，供大家参考，具体内容如下 HTML代码： <td>click me <td>click me <td>click me <td>click me <span id=bfn_la_bac.usa>15.43 </td>
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
10-16
主要介绍了Elementui表格组件+sortablejs实现行拖拽排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element ui 解决表格排序失效
絮落锦乡的博客
07-20 3691
一、问题说明： element ui 排序很简单只需要加 sortable="custom" 通过后端排序后，吧数据返回至前端，但是当你对表格进行行内编辑，或者其他的复杂操作时，就会出现失效。 在啰嗦一句，后端排序数据类型要注意，你搞个字符串类型排序，估计是给自己挖坑。 解决办法 <el-table-column prop="sequenceName" label="序号" key="1" width="80px" sortable="custom"></el-table-col
element-UI表格排序问题
Judy1623
03-05 5887
遇到的问题：表格不能排序 解决：在列上加： :sort-method = "sortChange1" 方法 &lt;el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'ascending'}" height="300" &gt; &lt;el-table-c
Vue3+Sortablejs对ElementPlus表格内容进行排序
CherishTaoTao的博客
08-02 1963
本文介绍使用Vue3结合Element-Plus以及Sortablejs第三方库实现对表格内容进行排序Element-Plus的ElMessage组件在我的环境下不能使用（有可能是和antd冲突）视频链接和提取码: 0t1pdemo较为简单，一些依赖先安装好就基本上可以实现较为注意的是sortable库的使用，可以根据参考链接去修改成自己想要的。.........
elementUI的table的排序结果不正确问题
weixin_45613604的博客
06-20 4584
做项目时发现使用elementUI的table的sortable排序结果不正确 可以加个sort-method事件 <el-table-column sortable :sort-method="(a,b)=>{return a.lawsuit - b.lawsuit}" prop="lawsuit" label="金额" show-overflow-tooltip></el-table-column> ...
表格排序问题，element表格排序问题，element-plus表格排序问题
imkaifan的博客
01-13 2388
表格排序问题，element表格排序问题，element-plus表格排序问题
Vue3+ElementUI-Plus+TS+Sortablejs 使用el-table表格 进行拖拽行数据排序
DingPaMao的博客
12-27 477
Vue3+ElementUI-Plus+TS+Sortablejs 使用el-table表格 进行拖拽行数据排序
element表格排序
05-25
要对Element表格进行排序，可以使用Element UI提供的el-table组件。你可以在el-table组件中设置sortable属性来启用排序功能。同时，你需要使用prop属性来指定需要排序的列和sort-order属性来指定升序或降序排列。 以下是一个示例代码： ```html <template> <el-table :data="tableData" :sort-order="sortOrder" :sort-by="sortColumn" sortable> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市海淀区' }, { name: '李四', age: 25, address: '上海市浦东新区' }, { name: '王五', age: 30, address: '广州市天河区' }, { name: '赵六', age: 22, address: '深圳市南山区' } ], sortColumn: '', // 排序列 sortOrder: '' // 排序方式（升序/降序） } }, methods: { handleSortChange({ column, prop, order }) { this.sortColumn = prop this.sortOrder = order // 在这里根据排序列和排序方式对表格数据进行排序 // 可以使用Array.sort()方法来实现排序 } } } </script> ``` 在上面的代码中，我们使用了handleSortChange方法来处理表格的排序。el-table组件会在排序发生变化时自动调用该方法并传入包含排序列、排序方式等信息的参数。在handleSortChange方法中，我们可以根据排序列和排序方式对表格数据进行排序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值