element表格排序功能

官方展示 

 个人项目

 可以分别对每一项数据进行筛选

注:筛选的数据不能是字符串类型必须是数字类型,否则筛选会乱排序

html 

<el-table :data="tableData" border height="600" style="width: 100%"><el-table-column prop="title" label="员工" align="center"></el-table-column><el-table-column :label="tableData[0].day1" align="center"><el-table-column prop="count1" sortable  width="120" label="目标" align="center"></el-table-column><el-table-column prop="ordercount1" sortable  width="120" label="完成" align="center"></el-table-column><el-table-column prop="orderrate1" sortable  width="120" label="完成率" align="center"><template #default="scope">{{ scope.row.orderrate1 + "%" }}</template></el-table-column></el-table-column><el-table-column :label="tableData[0].day2 + '至' + tableData[0].day1" align="center"><el-table-column prop="count2" sortable  width="120" label="目标" align="center"></el-table-column><el-table-column prop="ordercount2" sortable  width="120" label="完成" align="center"></el-table-column><el-table-column prop="orderrate2" sortable  width="120" label="完成率" align="center"><template #default="scope">{{ scope.row.orderrate2 + "%" }}</template></el-table-column></el-table-column><el-table-column :label="tableData[0].day3 + '至' + tableData[0].day1" align="center"><el-table-column prop="count3" sortable  width="120" label="目标" align="center"></el-table-column><el-table-column prop="ordercount3" sortable  width="120" label="完成" align="center"></el-table-column><el-table-column prop="orderrate3" sortable  width="120" label="完成率" align="center"><template #default="scope">{{ scope.row.orderrate3 + "%" }}</template></el-table-column></el-table-column>
</el-table>

数据结构 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/584952.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring boot使用配置文件对静态变量进行赋值

spring boot value ConfigurationProperties 注释静态配置文件变量引用 1.value 标签加在set方法上面&#xff0c;注意set方法是非静态 private static String userName;Value(value "${user.userName}")public void setUserName(String userName) {HelloWorldServ…

K8s陈述式资源管理

命令行&#xff1a;kubectl命令行工具 优点&#xff1a;90%以上的场景都可以满足 对资源的增删改查比较方便&#xff0c;对改不是很友好。 缺点&#xff1a;命令比较冗长&#xff0c;复杂&#xff0c;难记 声明式&#xff1a; 看到声明式都是k8s当中的yml文件来实现资源管理…

面试题-性能优化

前端项目优化&#xff1a; 一般考虑方面: (挑几点记住) 我们学的: 懒加载: 路由、图片懒加载 骨架屏的使用 压缩文件&#xff1a;可以使用压缩工具&#xff08;如GZIP&#xff09;对页面文件进行压缩&#xff0c;减小文件大小&#xff0c;提高页面加载速度。 减少HTTP请求&a…

什么是uniapp?用uniapp开发好不好用?

随着移动应用市场的持续发展&#xff0c;开发者们面临着不断增长的需求和多样化的平台选择。在这个背景下&#xff0c;UniApp 应运而生&#xff0c;成为一种跨平台开发框架&#xff0c;为开发者提供了一种高效、简便的方式来开发移动应用程序。利用 UniApp 开发应用程序可以节省…

天擎终端安全管理系统clientinfobymid存在SQL注入漏洞

产品简介 奇安信天擎终端安全管理系统是面向政企单位推出的一体化终端安全产品解决方案。该产品集防病毒、终端安全管控、终端准入、终端审计、外设管控、EDR等功能于一体&#xff0c;兼容不同操作系统和计算平台&#xff0c;帮助客户实现平台一体化、功能一体化、数据一体化的…

Django 文件上传(十二)

当 Django 处理文件上传时&#xff0c;文件数据最终会被放置在 request.FILES 。 查看文档&#xff1a;文件上传 | Django 文档 | Django Django工程如下&#xff1a; 创建本地存储目录 在static/应用目录下创建uploads目录用于存储接收上传的文件 在settings.py 配置静态目…

flutter实践:Isolate应用实例二

需求&#xff1a;尝试将Isolate封装一层便于直接使用 实现&#xff1a; 1.定义一个封装类 class TdxIsolate {//创建一个isolateIsolate? newIsolate;//新isolate发送器SendPort? childSender;//存放结果集List results [];//构造方法TdxIsolate() {//初始化isolate crea…

IDEA/VScode + Git Blame

IDEA IDEA中支持查看每行代码的commit信息&#xff0c;这是靠git blame命令来完成的。 鼠标悬置在上面&#xff0c;可以看到更多信息。 VScode vscode中有相应插件完成类似的工作。 找到一个Git Blame插件&#xff0c;就是专门用来完成这项工作的。 安装完成后&#xff0c;下…

数字孪生在能源电力行业的技术难点和应用场景

数字孪生的关键技术 数字孪生技术架构包括物理空间、数字空间和信息处理三个部分&#xff0c;基于物联网和虚拟仿真的底层技术&#xff0c;实现了真实空间和虚拟空间之间的双向数据交换、指挥控制和虚拟现实联动&#xff0c;以满足这些需求&#xff0c;必须依靠五项关键技术。 …

每日一题——LeetCode942

方法一 个人方法&#xff1a; 找规律&#xff0c;碰到I优先放最小的数&#xff0c;碰到D优先放最大的数&#xff0c;将0-n按照从小到大的顺序放入数组保存&#xff0c;碰到I就从数组前面取值&#xff0c;碰到D就从数组后面取值 var diStringMatch function(s) {var arr[],pe…

python gui programming cook,python gui视频教程

大家好&#xff0c;给大家分享一下python gui programming cook&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; Source code download: 本文相关源码 前言 上一节我们实现了明细窗体GUI的搭建&#xff0c;并且设置了查看、修改、添加三种不…

C语言实例_stdlib.h库函数功能及其用法详解

一、前言 C语言作为一种高效、灵活的编程语言&#xff0c;标准库的使用对于开发人员来说是不可或缺的。其中&#xff0c;stdlib.h是C语言中一个重要的标准库头文件&#xff0c;提供了许多常用的函数和工具&#xff0c;以便开发人员能够更加便捷地进行内存管理、字符串处理、随…

【WPF.NET开发】将路由事件标记为已处理和类处理

本文内容 先决条件何时将路由事件标记为已处理预览和浮升路由事件对实例和类路由事件处理程序复合控件中的输入事件禁止 尽管对于何时将路由事件标记为已处理没有绝对规则&#xff0c;但如果代码以重要方式响应事件&#xff0c;请考虑将事件标记为已处理。 标记为已处理的路由…

大创项目推荐 深度学习中文汉字识别

文章目录 0 前言1 数据集合2 网络构建3 模型训练4 模型性能评估5 文字预测6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习中文汉字识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xf…

OCP NVME SSD规范解读-4.NVMe IO命令-1

针对NVMe-IO-1到NVMe-IO-14的解读如下&#xff1a; NVMe-IO-1&#xff1a; 设备应支持所有必需的NVMe I/O命令。这是设备能够进行基本数据读写操作的基础要求。NVMe I/O命令包括读、写、删除、擦除等操作&#xff0c;这些是存储设备的核心功能。 NVMe-IO-2&#xff1a; 设备应…

JavaOOP篇----第二十五篇

系列文章目录 文章目录 系列文章目录前言一、一个”.java”源文件中是否可以包含多个类(不是内部类)?有什么限制?二、AnonymousInnerClass(匿名内部类)是否可以继承其它类?是否可以实现接口?三、内部类可以引用它的包含类(外部类)的成员吗?有没有什么限制?四、Java 中…

在 Python 中跳出嵌套循环的 5 种方法

在 Python 中跳出嵌套循环的 5 种方法(5 Ways To Break Out of Nested Loops in Python) 文章目录 在 Python 中跳出嵌套循环的 5 种方法(5 Ways To Break Out of Nested Loops in Python)1. 添加标志变量 Add a Flag Variable2. 抛出异常 Raise an Exception3. 再次检查相同条…

聊聊PowerJob的StoreStrategy

序 本文主要研究一下PowerJob的StoreStrategy StoreStrategy tech/powerjob/worker/common/constants/StoreStrategy.java Getter AllArgsConstructor public enum StoreStrategy {DISK("磁盘"),MEMORY("内存");private final String des; }StoreStra…

建造型设计模式-建造者模式

建造者模式一种对象构建模式&#xff0c;是将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。构建的对象很大并且需要多个步骤时&#xff0c;使用构建器模式&#xff0c;有助于减小构造函数的大小。把一个整体的构造函数分解成各个属性的…

[计算机提升] Windows系统软件:管理类

3.6 系统软件&#xff1a;管理类 3.6.1 运行 通过运行程序&#xff0c;在打开输入框中输入名称&#xff0c;按下回车后可以打开相应的程序、文件夹、文档或Internet资源&#xff1a; 3.6.2 命令提示符&#xff1a;cmd 在Windows系统中&#xff0c;cmd是指"命令提示符…