zoukankan      html  css  js  c++  java
  • Vue -- element-ui 所有数据前台排序

    <el-table
      v-loading="loading"
      :data="tableData.slice((pageNum-1)*pageSize,pageNum*pageSize)"
      style=" 100%;"
      @sort-change="sort_change"
    >
      <el-table-column :label="$t('table.date')" align="center" prop="recordDate" sortable>
        <template slot-scope="scope">
          <span>{{ parseTime(new Date(scope.row.recordDate), "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="新增人数" align="center" prop="followNum" sortable />
      <el-table-column label="取消关注人数" align="center" prop="unFollowNum" sortable />
      <el-table-column label="净增人数" align="center" prop="increaseNum" sortable />
      <el-table-column label="累积人数" align="center" prop="currdateFollowNum" sortable />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
    
    data(){
          return {
                loading: true,
                pageNum: 1,
                pageSize: 10, 
                total: 4,
                tableData: []
          }
    },
    methods: {
      sort_change(column) { // column是个形参,具体查看element-ui文档
          // console.log(column)
          this.pageNum = 1 // return to the first page after sorting
          if (column.prop === 'recordDate') {
              this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
              // console.log(this.tableData);
          } else if (column.prop === 'followNum') {
              this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
              // console.log(this.tableData);
          }else if (column.prop === 'unFollowNum') {
              this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
              // console.log(this.tableData);
          }else if(column.prop === 'currdateFollowNum') {
            this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'));
              // console.log(this.tableData);
          }
          // this.showed_data = this.tableData.slice(0, this.pageSize) // 排序完显示到第一页
          console.log('Finished')
        },
        sortFun: function (attr, rev) {
          //第一个参数传入info里的prop表示排的是哪一列,第二个参数是升还是降排序
          if (rev == undefined) {
              rev = 1;
          } else {
              rev = (rev) ? 1 : -1;
          }
          return function (a, b) {
              a = a[attr];
              b = b[attr];
              if (a < b) {
                  return rev * -1;
              }
              if (a > b) {
                  return rev * 1;
              }
              return 0;
          }
        },
    }
    

    特别感谢那篇文章,给人家点了赞忘记留链接了,所以没留原文链接,再次感谢!

  • 相关阅读:
    CSharpGL(36)通用的非托管数组排序方法
    CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口
    CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL
    CSharpGL(33)使用uniform块来优化对uniform变量的读写
    CSharpGL(32)矩阵与四元数与角度旋转轴的相互转换
    CSharpGL(31)[译]OpenGL渲染管道那些事
    CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率
    Go如何使用数据库、缓存
    Go内置常用包
    从零开始基于go-thrift创建一个RPC服务
  • 原文地址:https://www.cnblogs.com/lisaShare/p/13374082.html
Copyright © 2011-2022 走看看