通过 Table 的default-sort属性设置默认的排序列和排序顺序

2023-11-10

    在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。

使用sort-method或者sort-by使用自定义的排序规则。

如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。

在本例中,还使用了formatter属性,用于格式化指定列的值,接受一个Function,会传入两个参数:rowcolumn,可以根据自己的需求进行处理。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
    >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
</script>

转载于:https://my.oschina.net/u/3759656/blog/2906810

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过 Table 的default-sort属性设置默认的排序列和排序顺序 的相关文章

随机推荐

  • 配置setting.json解决vscode和vim按键冲突

    vim 对于需要经常使用的vscode中的复制 粘贴 剪切 全选 查找和新建等 在vim正常模式下是不可用的 不过可以在配置文件中取消vim handleKeys键位映射 即保留这些原始按键功能 对于上述可能存在和正常按键冲突 可以通过设置
  • LeetCode 1、两数之和(C)

    作者只是一个小白 最近希望能提升自己的代码水平 所以开始刷leetcode 写博客是为了整理自己的学习内容 难免会出错 如果有大大发现 非常欢迎指正哦 目录 题目 1 两数之和 题解 方法一 双重for循环 暴力枚举 1 自己的代码 2 代
  • 数据库键(key)、主键(primaryKey)、索引(index)、唯一索引(uniqueIndex)区别

    1 键 key 数据库的物理结构 一是约束 偏重于约束和规范数据库的结构完整性 二是索引 辅助查询用的 包括 primary key unique key foreign key 主键 唯一键 外键 1 primary key 主键 一个表
  • IKE与IPSec详解

    一 IKE简介 安全联盟SA 定义 安全联盟是要建立IPSec 隧道的通信双方对隧道参数的约定 包括隧道两端的IP地址 隧道采用的验证方式 验证算法 验证密钥 加密算法 共享密钥以及生命周期等一系列参数 SA由三元组来唯一标识 这个三元组包
  • Could not find method jackOptions() for arguments

    去掉 jackOptions enabled true 就好了
  • 【软件工程基础复习整理】第四章需求分析(5)UML建模语言

    结构化方法 数据流建模 IDEF0功能建模 IDEF1X数据建模 数据和功能分开 面向对象方法 封装起来 UML建模语言 面向对象方法的统一建模语言 UML建模语言 结构化方法70年代高潮 面向对象方法80年代末90年代初高潮 多种面向对象
  • /* px-to-viewport-ignore-next */ 注释无效解决方法

    进入github https github com evrone postcss px to viewport 因为npm库里对postcss to viewport的代码更新停了所以npm install的是之前有bug的代码 用项目里的
  • linux三级地址,linux(二) 应等保三级要求整改方案

    一 身份鉴别 1 1 密码复杂度及策略 第一种 修改 etc login defs 文件内容即可 密码最大有效期 PASS MAX DAYS 90 两次修改密码的最小间隔时间 PASS MIN DAYS 90 密码最小长度 对于root无效
  • 我的春招实习+秋招总结【前端开发】

    双非本科 通信工程 算是转到IT行业这边的了 从大二暑期正式开始学习前端 想想已经一年的时间了 期间经历了很多 从迷惘到清晰 从艰难自学到找到实习 从备战秋招到找到工作 能经历的我都经历过了 来说说那些 前端工作者 的艰辛与欢乐 开始自学前
  • 【蓝桥杯】枚举1

    今天是 蓝桥杯 枚举的6道练习题 目录 一 门牌制作 二 顺子日期 三 货物摆放 四 质数 五 数的分解 六 赢球票 一 门牌制作 题目描述 门牌制作20 本题为填空题 只需要算出结果后 在代码中使用输出语句将所填结果输出即可 小蓝要为一条
  • Python+OpenCV图像标注矩形框bounding box

    1 函数 用 OpenCV 标注 bounding box 主要用到下面两个工具 cv2 rectangle 和 cv2 putText 用法如下 cv2 rectangle 输入参数分别为图像 左上角坐标 右下角坐标 颜色数组 粗细 cv
  • MFC动态创建dialog,纯代码创建dialog

    参考 https www cnblogs com lidabo p 3447007 html 大概思路 新增一个类 作为对话框模板 DlgTemplate h pragma once include afx h define DLG TEM
  • CPU被挖矿,Redis竟是内鬼。

    作者 轩辕之风 原文链接 https www cnblogs com xuanyuan p 15564302 html 却说这一日 Redis正如往常一般工作 不久便收到了一条SAVE命令 虽说这Redis常被用来当做缓存 数据只存在于内存
  • Facade , Adapter, Mediator, Gateway

    While Facadesimplifies a more complex API it s usually done by the writer of the servicefor general use A Gateway is wri
  • Unity使用Mirror制作局域网的同步

    1 脚本布置 参考tank那个demo制作 1 新建空物体 为管理脚本的物体 manager 挂载NetworkManager kcpTransport NetworkManagerHud 2 设置玩家出生点 spawnPoint 设置好初
  • viewpager + pagerAdapter刷新问题

    class MyViewAdapter extends PagerAdapter private int Tag 0 用于判断是否删除了页面 如果删除为1 如果没有删除为0 Override public int getCount retu
  • Dynamics 365 Server 版本 9.0

    下载 Dynamics 365 Server 版本 9 0 此下载还包括 Dynamics 365 Reporting Extensions 下载完毕后 请运行 Dynamics 365 Server 安装程序 在安装过程中 您可以插入有效
  • uniapp实现图片的放大缩小可拖拽

    官网地址 https uniapp dcloud io component movable view id movable view 实现放大缩小主要依赖 movable view 注意 movable area指代可拖动的范围 可放大缩小
  • 一个python替换字符串的函数

    def replace words text word dic yo re compile join map re escape word dic def translate mat return word dic mat group 0
  • 通过 Table 的default-sort属性设置默认的排序列和排序顺序

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 在列中设置sortable属性即可实现以该列为基准的排序 接受一个Boolean 默认为false 可以通过 Table 的default sort属性设置默认的排序列和排