美文网首页
element排正倒序,默认为正倒序反

element排正倒序,默认为正倒序反

作者: 张宪宇 | 来源:发表于2021-08-09 15:05 被阅读0次

1.html

  <el-table
            v-loading="tableLoading"
            ref="multipleTables"
            :data="tableData"
            tooltip-effect="dark"
            @sort-change="sort"
            :sort-orders="['descending','ascending']"
            :default-sort = "{prop: 'customerPV', order: 'descending'}"
            sortable="custom"
            style="width: 100%;">
             <el-table-column label="信息明细">
                <el-table-column label="序号" width="45">
                    <template slot-scope="scope">
                        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                        <el-table-column prop="customerUV" sortable label="xxxx" width="130"></el-table-column>
            </el-table-column>
        </el-table>

2. js

   save_sort :'descending',
   save_number:1
  // 三种状态 正序 倒序 默认
   created(){
          if(this.$route.query)  {
           //上一页带过来得数据 进行倒序 切割
                this.tableDataDay.push(this.$route.query)
                this.tableDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.DescendingOrder('customerPV'))
                this.total = this.tableDataList.length
                this.tableData = this.tableDataList.slice(
                     Number(this.page - 1) * 10,
                     Number(this.page) * 10
                )
          }
    },
    methods: {
           // 降序
            DescendingOrder(c){  
                   return (a,b)=>{
                        return b[c] - a[c]
                   }
            },

            // 升序
           AscendingOrder(c){  
                 return (a,b)=>{
                      return a[c] - b[c]
                 }
           },

         sort({column, prop, order}){
                //关键步骤  点击默认状态时候 让默认状态为上一次状态得取反
                if(order == 'descending'){
                      this.save_sort= 'ascending'
                      this.save_number=1
                }else if(order== 'ascending'){
                      this.save_sort= 'descending'
                      this.save_number=2
                }else{
                      this.save_sort=null
                }

                 this.$nextTick(()=>{
                      this.page = 1;
                 })
       

                //  排序 大到小
               if(this.save_sort== null){
                    this.$nextTick(()=>{
                            if(this.save_number==1){
                                    this.tabletDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.AscendingOrder(prop))
                                    this.total = this.tableDataList.length
                                    this.tableData = this.tableDataList.slice(
                                          Number(this.page - 1) * 10,
                                          Number(this.page) * 10
                                    )
                              }
                            if(this.save_number==2){
                                      this.tableDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.DescendingOrder(prop))
                                      this.total = this.tableDataList.length
                                      this.tableData = this.tableDataList.slice(
                                          Number(this.page - 1) * 10,
                                          Number(this.page) * 10
                                      )
                             }
                  })
               }else if(this.save_sort== 'ascending'){
                          //  排序 小到大
                           this.$nextTick(()=>{
                              this.tableDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.DescendingOrder(prop))
                              this.total = this.tableDataList.length
                              this.tableData = this.tableDataList.slice(
                                    Number(this.page - 1) * 10,
                                    Number(this.page) * 10
                              ) 
                  })  
             }else{
                  this.$nextTick(()=>{
                       this.tableDataList=JSON.parse(this.$route.query.detailDTOS).sort(this.AscendingOrder(prop))
                       this.total = this.tableDataList.length
                       this.tableData = this.tableDataList.slice(
                            Number(this.page - 1) * 10,
                            Number(this.page) * 10
                      ) 
                }) 
           }
             this.save_sort = order;
         
   },

    currentChange(val){
        this.page = val
        this.tableData = this.tableDataList.slice(
             Number(val - 1) * 10,
             Number(val) * 10
        )
    }
}

相关文章

网友评论

      本文标题:element排正倒序,默认为正倒序反

      本文链接:https://www.haomeiwen.com/subject/lpuzvltx.html