使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序

简介: 使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
先上一张图

image

需求:

只给一级元素OR排序,分解出来的SR和AR不得排序,随着OR的位置顺序变动而变动,注意:每一个OR的唯一标识除了id以外还有_level字段,及OR的_level为1,SR的_level为2

实现:

使用elementui提供的sortable默认是把所有的_level为1和2的所有行都排了一下序,不能满足项目的需求,所以只能自己写

流程如下:

1、给el-table-column添加:render-header="renderHeader"属性

image

2、添加升序、降序图标和点击事件

image

目录
相关文章
|
存储 JSON JavaScript
Vue开发中Jwt的使用
Vue开发中Jwt的使用
488 0
Vue3-组件通信-$parent
Vue3-组件通信-$parent
286 0
|
JavaScript 前端开发 Java
Unicode转义(\uXXXX)的编码和解码
  在涉及Web前端开发时, 有时会遇到\uXXXX格式表示的字符, 其中XXXX是16进制数字的字符串表示形式, 在js中这个叫Unicode转义字符, 和\n \r同属于转义字符. 在其他语言中也有类似的, 可能还有其它变形的格式.
3756 0
|
7月前
|
JavaScript 前端开发 定位技术
Vue项目中的虚拟滚动:提升页面渲染性能的最佳实践
本文介绍虚拟滚动技术及其在Vue项目中的应用,通过vue-virtual-scroller实现大数据量下长列表的高性能渲染,提升页面流畅度与用户体验,适用于地图轨迹等业务场景。
1754 0
|
前端开发 API
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 开发者
"震撼揭秘!ElementUI Table组件大变身,一键自定义升序降序按钮,排序操作秒变炫酷舞台,点击即燃,你的列表排序从此不再平凡!"
【8月更文挑战第16天】在Vue.js开发中,ElementUI的Table组件因其实用性和灵活性深受喜爱。本文通过一个后台管理系统用户列表的案例,展示了如何自定义添加“升序”和“降序”按钮以增强排序功能。首先确保安装Vue与ElementUI;接着定义表格数据及初始排序状态;利用scoped slot自定义列模板,加入按钮并绑定点击事件;最后实现在点击按钮时更新排序状态并重新排序数据的逻辑。这种方法不仅改善了用户体验,还为开发者提供了灵活调整排序逻辑的空间。
838 3
|
JavaScript 前端开发 搜索推荐
ECharts词云图(案例一)+配置项详解
ECharts,百度的JavaScript图表库,支持词云图(自5.0版起),借助`echarts-wordcloud`插件。配置词云图涉及`tooltip`(如显示、颜色、边框等)和`series`(类型、形状、大小范围等)。示例代码展示了如何在HTML中引入依赖并配置词云图,包括数据、形状、大小、颜色等。完整代码和依赖可下载。调整这些配置可创建个性化词云图。参阅官方文档获取不同版本详情。
6675 4
 ECharts词云图(案例一)+配置项详解
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
4855 0
|
机器学习/深度学习 存储 分布式计算
解释 Spark 在 Databricks 中的使用方式
【8月更文挑战第12天】
972 1