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>

数据结构

相关推荐
aklry6 分钟前
uniapp三步完成一维码的生成
前端·vue.js
zhanshuo17 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan17 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢40 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
lemonzoey1 小时前
Node.js child_process 核心 API 详解
前端·javascript
lemonzoey1 小时前
pnpm 与 npm 的依赖管理机制深度解析
前端·javascript
lemonzoey1 小时前
PNPM 全局存储机制深度解析
前端·javascript
用户26124583401612 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
gnip2 小时前
markdown预览自定义扩展实现
前端·javascript