通过 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属性设置默认的排序列和排序顺序 的相关文章

  • 为什么 Number.isNaN() 对字符串返回 false?

    据我的理解NaN代表Not A Number Strings不是绝对的Numbers因此我希望下面的代码返回true对于字符串 然而 事实并非如此 console log Number isNaN Stack Overflow 有人可以澄清
  • 当 eslint 从子文件夹运行时无法解析相对模块路径

    当我从存储库的根文件夹运行 eslint 时 一切运行正常 没有错误 但是当我从子文件夹运行时 我会得到大量导入 未解决的问题 而当我从根目录运行时则不会发生这种情况 reporoot subfolder0 subfolder1 MyFil
  • 如何通过facebook-sdk python api获取用户帖子?

    我使用 facebook jssdk 授权我的应用程序读取用户个人资料和用户帖子 FB login function response scope user status user likes user photos user videos
  • jQuery 删除函数真的删除 Dom 元素吗?

    我真的想知道 jQuery 是否remove http api jquery com remove 函数确实从 DOM 中删除元素 首先 我看了here https stackoverflow com questions 2185760 j
  • PHP:在执行 php 脚本时显示“正在加载”页面

    这就是我现在所拥有的 我有一个网页 当访问该网页时 它会通过开放 API 连接到 Surveygizmo com 检索大量数据 然后将这些数据返回给我进行处理 此过程大约需要 10 12 秒 在执行时 页面只是处于 正在加载 状态 并且我会
  • keras 预测内存交换无限期增加

    我使用keras实现了一个分类程序 我有一大组图像 我想使用 for 循环来预测每个图像 然而 每次计算新图像时 交换内存都会增加 我尝试删除预测函数内部的所有变量 并且我确信该函数内部存在问题 但内存仍然增加 for img in ima
  • 如何在 Spyder IDE 中安装 Selenium 包

    我刚刚在工作中安装了 Spyder IDE 仅 Spyder 不是整个 Anaconda 并且希望使用 FireFox 自动化我的工作 我的问题是 如何安装 Selenium 软件包 I figured it out Here is ins
  • if/else 在 while 循环内正确缩进[关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我开始学习 Python 编程大约几周了 我遇到了一些麻烦 下面的代码是一个小程序 用于检查列表中是否有偶数 如果找到第一个偶数
  • 通过套接字发送字符串(python)

    我有两个脚本 Server py 和 Client py 我心中有两个目标 能够从客户端一次又一次地向服务器发送数据 能够将数据从服务器发送到客户端 这是我的 Server py import socket serversocket soc
  • 在成功回调之前修改 JSONP 结果

    我想从外部服务加载一些 JSON 数据 然而 它提供 foo bar useful 而我真正关心的是 有用 的部分 我需要将那部分传递给success打回来 我正在尝试使用Deferred一次从多个数据源加载 类似this https st
  • 如何在 Python 中解析损坏的 XML?

    我无法影响的服务器发送的 XML 非常损坏 具体来说 Unicode WHITE STAR 将被编码为 UTF 8 E2 98 86 然后使用 Latin 1 转换为 HTML 实体表 我得到的是 acirc 98 86 9 个字节 位于声
  • 升级后 pip 损坏

    我做了 pip install U easyinstall 然后 pip install U pip 来升级我的 pip 但是 当我尝试使用 pip 时 我现在收到此错误 root d8fb98fc3a66 which pip usr lo
  • 如何使用 jquery 生成并附加随机字符串

    一般性 我想使用 jQuery 或 javascript 将随机字符串附加到元素的属性 规格 我需要引用 CDN 上的 CSS 文件 不幸的是 每次更新该 CSS 文件时 CDN 都会更改该文件的 URL 所以我不能简单地引用静态 URL
  • python IDLE shell 似乎无法正确处理一些转义

    例如 b 退格键打印为四元 在下面的示例中显示为 但是 n 换行是可以的 gt gt gt print abc bd abc d gt gt gt print abc nd abc d 我在 Vista pro python 2 7 下运行
  • javascript初学者:在javascript中添加动态样式? [复制]

    这个问题在这里已经有答案了 可能的重复 如何使用 Javascript 创建 标签 https stackoverflow com questions 524696 how to create a style tag with javasc
  • Elastic Beanstalk 上的 Django + MySQL - 查询 MySQL 时出错

    当我在 Elastic beanstalk 上托管的 Django 应用程序上查询 MySQL 时 出现错误 错误说 admin login 处出现操作错误 1045 用户 adminDB 172 30 23 5 的访问被拒绝 使用密码 Y
  • 如何指定一个变量作为类或类实例的成员变量?

    在最新的 Python 2 7 x 中 给定类定义内的任何成员变量 该成员变量是否始终处于类级别 因为它是由该类的所有实例共享的单个变量 在类的定义中 如何指定 类定义中的哪些成员变量属于该类 因此由该类的所有实例共享 以及 哪些属于该类的
  • 提供节点名或服务名,或未知

    我收到这个 Python 错误 File Library Frameworks Python framework Versions 2 7 lib python2 7 urllib2 py line 1184 in do open rais
  • Python 中的 C 指针算术

    我正在尝试将一个简单的 C 程序转换为 Python 但由于我对 C 和 Python 都一无所知 这对我来说很困难 我被 C 指针困住了 有一个函数采用 unsigned long int 指针并将其值添加到 while 循环中的某些变量
  • 在 pip 中为 Flask 应用程序构建 docker 映像失败

    from alpine latest RUN apk add no cache python3 dev pip3 install upgrade pip WORKDIR backend COPY backend RUN pip no cac

随机推荐

  • 配置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属性设置默认的排序列和排