element表格排序功能

巨蟹座守护骑士

已于 2023-12-29 18:02:19 修改

阅读量744

点赞数 7

分类专栏： vue2 文章标签： vue.js elementui javascript

于 2023-12-29 18:01:52 首次发布

本文链接：https://blog.csdn.net/weixin_70563937/article/details/135295934

版权

vue2 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

官方展示

个人项目

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

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

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>

数据结构