在数据展现时我们常常需要对数据进行排序,如果项目中应用了elementUI并且是在table表格中,很好处理

:default-sort = "{prop: 'id', order: 'Ascending'}"

这个是官方默认的排序 在el-table中则整个table都是排好序的
这里写图片描述

<template> 
<el-table
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}" > <el-table-column
prop="date"
label="日期"
sortable
width="180"> 
</el-table-column>
<template> 

在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。在本例中,我们还使用了formatter属性,它用于格式化指定列的值,接受一个Function,会传入两个参数:row和column,可以根据自己的需求进行处理。
sortable让某一列可以自由选择排序:

如果在ul和li标签中则需要先排好序,再v-for循环显示:

<template >
          <!--游戏平台列表-->
          <ul class="resource-data clearfix"><!--v-model="resource_key" @change="handleCheckedResourceName"-->
            <li :class="[gameListSelected[gameList.game_id] ? 'selected' : '']"
              v-for="gameList in authListData.game_list" :key="gameList.game_id"
                @click="gameListSelect(gameList.game_id)"
                > <!-- authListData.game_list -->
              {{'ID:'+gameList.game_id}}
              {{gameList.game_name }}
            </li>
          </ul>
        </template>

这里的游戏列表需要从小到大排列,所以需要对authListData.game_list进行排序也就是:

 v-for="gameList in authListData.game_list" :key="gameList.game_id"

方法是在获取数据的地方先排序

 getUserAuthList () {
      this.$api
        .getUserAuthList({}) // 里面是要传的参数
        .then((res) => {
          console.log('当前获取的用户权限列表:', res.data)
          this.userListDataLoading = false
          if (parseInt(res.data.errno, 10) === 0 && res.data.data) {
            console.log(res)
            this.userListData = res.data.data.user_list// user_list authListData
            this.authListData = res.data.data
            // 游戏列表进行排序展示
            this.authListData.game_list.sort((a, b) => a.game_id - b.game_id)**
          }
        }).catch((err) => {
          console.log(err)
          this.userListDataLoading = false
        })
    },

加入// 游戏列表进行排序展示
this.authListData.game_list.sort((a, b) => a.game_id - b.game_id)

这样得到的数据就是排好了序的

Logo

前往低代码交流专区

更多推荐