element表格排序功能

官方展示

个人项目

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

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

html

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>

数据结构

相关推荐
华仔啊2 分钟前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮33 分钟前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手1 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码1 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码1 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高0071 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴1 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong1 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript
skykun1 小时前
今天你学会JS的类型转换了吗?
javascript