基于Vue的UI框架element el-table表格的自定义排序

一时失言乱红尘 2023-06-17 14:58 18阅读 0赞

Element UI官方文档：[https://element.eleme.cn/\#/zh-CN/component/installation][https_element.eleme.cn_zh-CN_component_installation]

## 自定义排序：sort-method ##

*  **HTML部分：**

<el-table-column label="容器名称" property="vesselName" :sortable="true" :sort-method="sortByVesselName">
    </el-table-column>

*  **JS部分：**

methods: {
        
        //HTML中定义的排序方法
        sortByVesselName(obj1, obj2) {
            //自定义的排序逻辑
            let num1 = obj1.vesselName.substring(4)*1;
            let num2 = obj2.vesselName.substring(4)*1;
            return num1-num2;
        }
    
    }

**好处：可以在排序方法中自定义自己想要的排序逻辑。**

### \------扫码进群，怕你禁不住福利的诱惑------ ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE5MjEwMg_size_16_color_FFFFFF_t_70][]

[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE5MjEwMg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021042510462371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE5MjEwMg==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关基于element-ui的分页表格组件

文章目录实现思路组件代码使用案例系列文章实现思路搜索网上的分页表格案例，大部分是使用for循环来渲染表格列，那样只能支持纯展示

约定不等于承诺〃/ 2023年10月06日 07:22/ 0 赞/ 11 阅读

相关封装 vue + element-ui 表格组件

1.介绍首先，我们项目中用的表格一般会很多，有的数据也很大，这样每一个模块中都会有一个表格，甚至弹窗中也有，大大增加了代码量，根据这一点，我们来封装一个表格，只需要传入

川长思鸟来/ 2023年09月24日 16:16/ 0 赞/ 65 阅读

相关基于Vue的UI框架element el-table表格的自定义排序

Element UI官方文档：[https://element.eleme.cn/\/zh-CN/component/installation][https_element.e

一时失言乱红尘/ 2023年06月17日 14:58/ 0 赞/ 19 阅读

相关 VUE element-ui 之table表格导出Excel（自定义表头+自定义导出字段内容）

导出excel自定义表头及自定义字段步骤： 1.安装依赖 npm install --save xlsx file-saver npm install

浅浅的花香味﹌/ 2023年01月17日 07:35/ 0 赞/ 384 阅读

相关 Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标

Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标博主很久之前就想使用Element-UI，总是因为需要学习后端技术

旧城等待，/ 2022年12月27日 12:51/ 0 赞/ 304 阅读

相关 vue+element-ui实现表格的拖拽排序

import sortable from "sortable.js"; //引入的npm methods:\{ //议题排序 tableSort()

╰+哭是因爲堅強的太久メ/ 2022年10月25日 15:26/ 0 赞/ 327 阅读

相关实现element-ui的表格嵌套表格

<el-table v-loading="loading" :data="tableData"

逃离我推掉我的手/ 2022年10月08日 11:25/ 0 赞/ 737 阅读

相关 Element UI的表格table列的宽度自定义设置

之前width使用的是百分比改成固定宽度 <el-table-column prop="login\_id" width="15%" align="center" lab

末蓝、/ 2022年04月08日 08:47/ 0 赞/ 1129 阅读

相关 vue element-UI 自定义 Upload 上传

前端代码：action为必填，在下面的params中可以获取到，:http-request可以覆盖默认上传方式，调用自定义的上传方法 <el-tab-pane lab

柔情只为你懂/ 2021年07月27日 02:10/ 0 赞/ 575 阅读

相关 VUE Element-ui 表单自定义验证规则

验证规则：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误 HTML代码： <el-form :model="modifyForm"

淡淡的烟草味﹌/ 2021年07月25日 11:27/ 0 赞/ 586 阅读