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,一经查实,立即删除!

相关文章

K8s陈述式资源管理

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

什么是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 配置静态目…

IDEA/VScode + Git Blame

IDEA IDEA中支持查看每行代码的commit信息&#xff0c;这是靠git blame命令来完成的。 鼠标悬置在上面&#xff0c;可以看到更多信息。 VScode vscode中有相应插件完成类似的工作。 找到一个Git Blame插件&#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;以便开发人员能够更加便捷地进行内存管理、字符串处理、随…

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

文章目录 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 中…

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

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

nacos入门篇001-安装与启动

1、下载zip包 我这里下载的是版本2.2.0 Nacos 快速开始 2、修改配置文件 2.1集群模式修改成单例模式 vi startup.sh 2.2 修改数据库配置信息 3、初始化数据库 3.1 创建db名称&#xff1a;db_nacos 3.2 执行mysql-schema.sql 3.3 执行完截图&#xff1a; 4、运行脚本启动 …

听GPT 讲Rust源代码--src/tools(34)

File: rust/src/tools/clippy/clippy_lints/src/collection_is_never_read.rs 文件"collection_is_never_read.rs"位于Rust源代码中的clippy_lints工具中&#xff0c;其作用是检查在集合类型&#xff08;如Vec、HashMap等&#xff09;的实例上执行的操作是否被忽略了…

LT8612UX-HDMI2.0 to HDMI2.0 and VGA Converter with Audio,支持三通道视频DAC

HDMI2.0 to HDMI2.0 and VGA Converter with Audio 1. 描述 LT8612UX是一个HDMI到HDMI和vga转换器&#xff0c;它将HDMI2.0数据流转换为HDMI2.0信号和模拟RGB信号。 它还输出8通道I2S和SPDIF信号&#xff0c;使高质量的7.1通道音频。 LT8612UX支持符合HDMI2.0/ 1.4规范的…

ubuntu python播放MP3,wav音频和录音

目录 一.利用pygame&#xff08;略显麻烦&#xff0c;有时候播放不太正常&#xff09;1.安装依赖库2.代码 二.利用mpg123&#xff08;简洁方便&#xff0c;但仅争对mp3&#xff09;1.安装依赖库2.代码 三.利用sox&#xff08;简单方便&#xff0c;支持的文件格式多&#xff09;…

亚信安慧AntDB数据并行加载工具的实现(一)

1.概述 数据加载速度是评判数据库性能的重要指标&#xff0c;能否提高数据加载速度&#xff0c;对文件数据进行并行解析&#xff0c;直接影响数据库运维管理效率。基于此&#xff0c;AntDB分布式数据库提供了两种数据加载方式&#xff1a; 一是类似于PostgreSQL的Copy命令&am…

thingsboard前端缓存--nginx

thingsboardnginx thingsboard部署到阿里云服务器之后&#xff0c;由于登录界面要发送的文件很大&#xff0c;并且服务器的带宽目前有限&#xff0c;因此配置一个nginx&#xff0c;进行前端页面的一些缓存&#xff0c;参考了https://qianchenzhumeng.github.io/posts/Nginx%E5…

C语言编写Windows程序:组合启用/禁用Telnet客户端,并Telnet指定ip和端口

本文程序是将启用/禁用Telnet客户端的命令进行组合&#xff0c;单个命令的解析可参考文章&#xff1a; 启用/禁用Windows功能中的Telnet客户端的命令_()命令将阻止使用telnintel-CSDN博客 源代码如下&#xff1a; #include <stdio.h> #include <stdlib.h> #include…

【重磅新品】小眼睛科技推出紫光同创盘古系列FPGA开发板套件,盘古200K开发板,紫光同创PG2L200H,Logos2系列

FPGA&#xff0c;即现场可编程门阵列&#xff0c;作为可重构电路芯片&#xff0c;已经成为行业“万能芯片”&#xff0c;在通信系统、数字信息处理、视频图像处理、高速接口设计等方面都有不俗的表现。近几年&#xff0c;随着国家战略支持和产业发展&#xff0c;国产FPGA迎来迅…