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>

数据结构

相关推荐
谦哥18 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
心在飞扬32 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C36 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
10年前端老司机2 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星2 小时前
vue实现微信聊天emoji表情
前端·javascript
極光未晚2 小时前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin2 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js