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>

数据结构 

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2023-12-30 11:14:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-30 11:14:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-30 11:14:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-30 11:14:03       18 阅读

热门阅读

  1. MIUI解BL锁+刷系统教程

    2023-12-30 11:14:03       37 阅读
  2. 基于SpringBoot的新能源充电系统

    2023-12-30 11:14:03       41 阅读
  3. Redis主从切换(单点故障)解决源码

    2023-12-30 11:14:03       37 阅读
  4. PB 按Excel动态创建对应字段

    2023-12-30 11:14:03       28 阅读
  5. Flutter 三点三:Dart Stream

    2023-12-30 11:14:03       31 阅读
  6. 神经网络分类与回归任务

    2023-12-30 11:14:03       32 阅读
  7. 1.2 金融数据处理

    2023-12-30 11:14:03       32 阅读