分页排序只排当页数据,有没有什么办法可以让把所有的数据都排上?下面放代码,求大佬指导参考

              <mu-data-table selectable select-all :selects.sync="selects" :loading="tableLoading"
                             :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list" >
                <template slot-scope="scope">
                  <td>{{scope.row.title}}</td>
                  <td class="is-right" style="padding-right: 20px;padding-left: 0px">{{scope.row.createdUserName}}</td>
                  <td class="is-right" style="padding-right: 65px;padding-left: 0px">{{scope.row.averageScore|filteringDigital}}</td>
                  <td class="is-right" style="padding-right: 0px;padding-left: 0px">{{scope.row.createdTime|dateFmt('YYYY-MM-DD HH:mm:ss')}}</td>
                  <td class="is-right" style="padding-right: 150px;">
                    <mu-menu >
                      <mu-button color="primary" small flat>操作<mu-icon right value="arrow_drop_down"></mu-icon></mu-button>
                      <mu-list slot="content">
                        <mu-list-item button @click="details(scope.row.id)">
                          <mu-list-item-title>详情</mu-list-item-title>
                        </mu-list-item>
                      </mu-list>
                    </mu-menu>
                  </td>
                  <td class="is-right">{{scope.row.iron}}</td>
                </template>
              </mu-data-table>
              <mu-flex justify-content="end" style="margin-top:24px;">
                <mu-pagination :sort="sort" :total="current.totalSize" :current.sync="current.page" :page-size="current.pageSize" @change="changePage()"></mu-pagination>
              </mu-flex>
            </mu-paper>

script

handleSortChange ({name, order}) {
             if(name === 'score'){
               this.list = this.list.sort((a, b) =>
                 order === 'asc' ? a[name] - b[name] : b[name] - a[name]
               );
             }else{
               this.list =this.list.sort((a,b) => {
                 let aTimeString = a[name];
                 let bTimeString = b[name];
                 let aTime = Number(new Date(aTimeString).getTime());
                 let bTime = Number(new Date(bTimeString).getTime());
                 if(order === 'asc'){
                   return aTime-bTime
                 }else {
                   return bTime-aTime
                 }
               })
             }
             console.log(this.list)
           },
           loadRethinkList(title){
             this.tableLoading = true;
               testpage({
                   currentPage:this.current.page,
                   pageSize:this.current.pageSize,
                   start:0,
                   data:{status:1,title:title}
                 }).then(res =>{
                 if (res.code == 200) {
                   this.list = res.data.list;
                   this.current.totalSize = res.data.total;
                   this.current.page = res.data.currentPage;
                   console.log(res.data.list)
                 } else {
                   this.$toast.warning("量表列表获取失败: " + res.message)
                 }
                 this.tableLoading = false;
               })
           },
           changePage(){
             this.loadRethinkList()
           },
           details(id){
             this.$router.push({path: '/rethink/info',name: "RethinkInfo", params:{ rethinkId: id }});
           }
         },

4个回答

先给数据排了序再分页

拿到后台去做他不香吗?

guangcaiwudong
Kevin.Y.K 必须香
2 个月之前 回复

让后端直接排序分页就好了。前端做的话,量大的时候太慢了;
前端做的话:把当前页的数据单独赋值给一个变量,想咋操作咋操作!

一般的table组件都有排序属性,分为本地排序和remote排序。
1.本地排序是排序当前的分页数据,
2.remote是把排序字段给后台,后台直接sql排序,返回排序号的当前页的数据。
譬如:sort:local|remote,具体排序的实现都不用考虑

你好像没有使用组件,我觉得你可以找一个,或者你自己封装一个。
提取公共,提取通用,提取组件,以后也方便调整和别的地方使用。
你可以自己写一个自己用的Table组件,最好找别人开源的

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问