美文网首页
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