element表格排序功能

news2025/1/13 7:45:46

官方展示 

 个人项目

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

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

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.coloradmin.cn/o/1342555.html

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

相关文章

K8s实战-init容器

概念&#xff1a; 初始化容器的概念 比如一个容器A依赖其他容器&#xff0c;可以为A设置多个 依赖容易A1&#xff0c;A2&#xff0c;A3 A1,A2,A3要按照顺序启动&#xff0c;A1没有启动启动起来的 话&#xff0c;A2,A3是不会启动的&#xff0c;直到所有的静态容器全 部启动完毕…

基于Java车间工时管理系统(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

[stm32f103]DMA

简介 • DMA &#xff08; Direct Memory Access &#xff09;直接存储器存取 • DMA 可以提供外设和存储器或者存储器和存储器之间的高速数据传输&#xff0c;无须 CPU 干预&#xff0c;节省了 CPU 的资源 • 12 个独立可配置的通道&#xff1a; DMA1 &#xff08; 7 个通道…

Python爬取今日头条热门文章

前言 今日头条文章收益是没有任何门槛&#xff0c;只要是你发布文章&#xff0c;每篇文章的阅读量超过1000就能有收益&#xff0c;阅读量越多收益越高。于是乎我就有了个大胆的想法。何不利用Python爬虫&#xff0c;爬取热门文章&#xff0c;然后完成自动化发布文章呢&#xf…

独立容器 Rancher Server 证书过期解决

问题 Rancher无法登录 容器报错X509&#xff1a;certificate has expired or is not ye valid 在某天需要发布新版本的时候&#xff0c;发现rancher无法登录&#xff0c;于是到服务器上查看rancher日志&#xff0c;发现以下内容&#xff1a; docker logs -f rancher --since10…

Large-Precision Sign using PBS

参考文献&#xff1a; [CLOT21] Chillotti I, Ligier D, Orfila J B, et al. Improved programmable bootstrapping with larger precision and efficient arithmetic circuits for TFHE[C]//Advances in Cryptology–ASIACRYPT 2021: 27th International Conference on the T…

【强化学习】基于蒙特卡洛MC与时序差分TD的简易21点游戏应用

1. 本文将强化学习方法&#xff08;MC、Sarsa、Q learning&#xff09;应用于“S21点的简单纸牌游戏”。 类似于Sutton和Barto的21点游戏示例&#xff0c;但请注意&#xff0c;纸牌游戏的规则是不同且非标准的。 2. 为方便描述&#xff0c;过程使用代码截图&#xff0c;文末附链…

JavaSE基础50题:25. 查找数组中指定元素(顺序查找)

概述 给定一个数组&#xff0c;再给定一个元素&#xff0c;找出该元素在数组中的位置。 for循环遍历 【概述】 一个一个找&#xff0c;比较慢。 想要快一点的方法&#xff0c;可以使用二分查找&#xff0c;在后续《JavaSE基础50题》专栏中27题中详细讲解。 【代码】 public …

MySql篇——MySql使用常见问题及解决办法

这里汇总MySql使用常见问题及解决办法&#xff0c;会持续更新。 问题1.ERROR 1819 (HY000): Your password does not satisfy the current policy requirements。 含义&#xff1a;你设置的密码不符合当前的密码等级。 可使用 SHOW VARIABLES LIKE validate_password%; 查看…

C#中的Attribute详解(上)

C#中的Attribute详解&#xff08;上&#xff09; 一、Attribute是什么二、Attribute的作用三、Attribute与注释的区别四、系统Attribute范例1、如果不使用Attribute&#xff0c;为了区分这四类静态方法&#xff0c;我们只能通过注释来说明&#xff0c;但这样做会给系统带来很多…

计算机图形学光线追踪大作业C++基于Optix为框架实现的光线追踪算法合集,含直射光阴影效果、漫反射阴影效果、镜面反射效果等示例

MineRay 使用Optix为框架实现的光线追踪算法。 包含4个示例&#xff0c;直射光阴影效果、漫反射阴影效果、镜面反射效果、折射效果 环境需求 本项目在Windows 10中测试&#xff0c;以下环境为Windows中的环境 CUDA 10.1 OptiX 7 SDK cmake 编译方式 使用cmake编译 打开Mi…

分布式、CAP 和 BASE 理论

在计算机科学领域&#xff0c;分布式系统是一门极具挑战性的研究方向&#xff0c;也是互联网应用中必不可少的优化实践&#xff0c;而 CAP 理论和 BASE 理论则是分布式系统中的两个关键的概念。 什么是分布式系统 首先&#xff0c;让我们来谈谈分布式系统。你可以将分布式系统…

C++进阶--继承和多态常见题目

继承和多态常见题目 概念考查问答题 概念考查 下面哪种面向对象的方法可以让你变得富有( A) A: 继承   B: 封装   C: 多态   D: 抽象 这道题说哪种面向对象的方法可以让我们更富有&#xff0c;也就是东西更多&#xff0c;那么一定是继承无疑了&#xff0c;因为继承可以让…

ArcGIS高程点生成等高线

基本步骤&#xff1a;数据清洗→创建TIN→TIN转栅格→等值线→平滑线。 1.&#xff08;重要&#xff09;数据清理&#xff1a;删除高程点中的高程异常值数据。 2.创建TIN:系统工具→3D Analyst Tools→数据管理→TIN→创建TIN&#xff08;可直接搜索工具TIN&#xff09;。 单击…

移动机器人规划、控制算法初识

规划与控制PNC(PlanningandControl) 1 路径规划算法&#xff1a; 移动机器人路径规划算法总结_机器人运动轨迹算法-CSDN博客 2 控制算法&#xff1a; 机器人控制算法综述_机器人控制技术综述-CSDN博客 机器人控制算法简要概述_智能控制算法-CSDN博客 学习资源&#xff1a; …

VSCode 未装插件

EditorConfig for VS Code&#xff1a;自定义代码规范&#xff0c;按照自己指定的规则而不是编辑器默认的格式化。 ES7 React/Redux/React-Native snippets&#xff1a;款苏插入React代码片段。 Material Icon Theme&#xff1a;文件图标主题。 Prettier - Code formatte…

自然语言处理(第16课 机器翻译4、5/5)

一、学习目标 1.学习各种粒度的系统融合方法 2.学习两类译文评估标准 3.学习语音翻译和文本翻译的不同 4.学习语音翻译实现方法 二、系统融合 以一个最简单的例子来说明系统融合&#xff0c;就是相当于用多个翻译引擎得到不同的翻译结果&#xff0c;然后选择其中最好的作为…

在VMware安装CentOS 7:详细教程

安装准备工作 本地虚拟机&#xff1a;我这里使用的是VMware Workstation 17 Pro centos7系统ISO镜像&#xff1a;我这里使用的是CentOS-7-x86_64-DVD-2009.iso&#xff0c;具体的下载地址是在阿里云官方镜像站&#xff1a;centos-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿…

k8s的资源管理

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

AIGC时代下,结合ChatGPT谈谈儿童教育

引言 都2024年了&#xff0c;谈到儿童教育&#xff0c;各位有什么新奇的想法嘛 我觉得第一要务&#xff0c;要注重习惯养成&#xff0c;我觉得聊习惯养成这件事情范围有点太大了&#xff0c;我想把习惯归纳于底层逻辑&#xff0c;我们大家都知道&#xff0c;在中国式教育下&a…