elementUI table排序 sortable

使用elementUI做后台程序时非常便利，但有时，插件的用法也会让人头疼。

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

这是elementUI对Table的排序属性sortable的介绍说明

试着用自己的项目写一下试试

如果数据类型比较简单，比如数字时间可以像下面代码这样写

但是还是有弊端的，这个方式写后，排序只排当前这一页的顺序，现然是不推荐使用的

<el-tablev-loading="listLoading":data="userList"style="width: 100%"id="out-table"><el-table-columnprop="updateAt"label="时间"width="100"sortable></el-table-column>
</el-table>

那么就有了另一种写法，配合后端完成排序

将sortable的值设成custom，后在<el-table>上监听sort-change事件。注意是@不是：。

<el-tablev-loading="listLoading":data="userList"style="width: 100%"id="out-table"@sort-change="changeSort"><el-table-columnprop="updateAt"label="时间"width="100"sortable="custom"></el-table-column>
</el-table>

然后在js中声明这个监听的方法

获取到prop和order进行判断是哪列排序，升序还是降序

changeSort(val) {// console.log(val);   //val里面返回prop和orderif (val.prop == "updateAt") {if (val.order == "ascending") {//updateAt列升序时   }else if (val.order == "descending") {//updateAt列降序时   }else{//updateAt列不排序时 }}
},

建议后端的接口自带排序参数，这样会减少前端代码量，只需要在判断里为参数赋值即可。

这样排序功能就做好啦

elementUI table排序 sortable相关推荐

1.ElementUI中table的sortable使用
ElementUI中table的sortable使用 ElementUI-table 1.业务分析将相对应的字段进行升序或者降序,在后台管理系统中,后端返回的指定的页面的数据,所有后端将排序做好,前 ...
elementUI table自定义表头弹框搜索，排序，显示tag标签
elementUI table自定义表头弹框搜索,排序,显示tag标签允许一种排序,多种搜索条件包括三种类别,添加了solt插槽,也可以自定义: 输入框[input] 多选[checkbox] 范 ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
bootstrap table排序php,BootStrap+Table排序分页序号
这次给大家带来BootStrap+Table排序分页序号,BootStrap+Table排序分页序号的注意事项有哪些,下面就是实战案例,一起来看一下. 前言在使用bootstrap table的时候难 ...
element-ui table 指定单元格动态字体颜色设置
element-ui table 指定单元格动态字体颜色设置根据后端返回的值,动态的自动变更element-ui table 指定单元格的字体的颜色或者整行的颜色值一.指定单元格突出显示颜色,如: ...
JavaScript Table排序
序二(09/05/03) 近来还是那么忙,趁五一更新一下程序吧. 这个版本主要增加和改进了以下东西: 1,对字符串改用localeCompare来比较: 2,一次排序中能使用多个排序对象(用于值相等时 ...
table多行表头合并 vue_vue elementUI table 自定义表头和行合并的实例代码
最近项目中做表格比较多,对element表格的使用,只需要传递进去数据,然后写死表头即可渲染. 但现实中应用中,如果写死表头,并且每个组件中写自己的表格,不仅浪费时间而且消耗性能.这个时候需要动态渲染 ...
elementUI table表格合并相同的内容
elementUI table表格合并相同的内容 1.表格和数据表格是这样数据(由于数据太多,只展示了几个) tableData: [{one: '1 . 产出指标',two: '1 .1 数量指 ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...

elementUI table排序 sortable

elementUI table排序 sortable相关推荐

最新文章

热门文章