• 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;
          }
        },
    }
    

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

  • 相关阅读:
    Subway POJ
    Invitation Cards POJ
    Cow Contest POJ
    MPI Maelstrom POJ
    Wormholes POJ
    Currency Exchange POJ
    Codeforces Round #608 (Div. 2) D Portals
    AcWing 1052. 设计密码
    AcWing 1058. 股票买卖 V 状态机模型dp
    AcWing 1057. 股票买卖 IV 状态机模型dp
  • 原文地址:https://www.cnblogs.com/lisaShare/p/13374082.html
Copyright © 2020-2023  润新知