当前位置: 首页 > news >正文

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.lryc.cn/news/271472.html

相关文章:

  • HNU-Java程序设计基础训练-2023
  • 数据库和数据库编程
  • 爬虫基础一(持续更新)
  • 右键菜单“以notepad++打开”,在windows文件管理器中
  • JSON.parseObject强制将自动转化的Intage型设置为Long型
  • Redis的集群模式:主从 哨兵 分片集群
  • Note: An Interesting Festival
  • iview表格固定列横向滚动条无法拖动问题
  • Python序列之集合
  • 智慧园区物联综合管理平台之架构简述
  • 国科大图像处理2023速通期末——汇总2017-2019
  • oracle 9i10g编程艺术-读书笔记2
  • PACC:数据中心网络的主动 CNP 生成方案
  • 我最喜欢的趣味几何书-读书笔记
  • Stable Diffusion模型概述
  • 二叉树详解(深度优先遍历、前序,中序,后序、广度优先遍历、二叉树所有节点的个数、叶节点的个数)
  • C++日期类的实现
  • B+树的插入删除
  • c# Avalonia 绘图
  • springboot 双数据源配置
  • Redis内存使用率高,内存不足问题排查和解决
  • bootstrap5开发房地产代理公司Hamilton前端页面
  • 2024年Mac专用投屏工具AirServer 7 .27 for Mac中文版
  • 关于MySql字段类型的实践总结
  • UG NX二次开发(C#)-Ufun和NXOpen混合编程
  • 【Spark精讲】一文讲透Spark RDD
  • 如在MT9040、IDT82V3001A 等锁相环上电后或输入参考频率改变后必须复位锁相环。
  • 构建安全的SSH服务体系
  • wpf ComboBox绑定数据及变更事件
  • SQL BETWEEN 操作符