CodeChenL
CodeChenL

web前端_Vue框架_js的sort排序和elementUI排序

在数据展现时我们常常需要对数据进行排序，如果项目中应用了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让某一列可以自由选择排序：
web前端_Vue框架_js的sort排序和elementUI排序_第1张图片

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

<template >
          
          <ul class="resource-data clearfix">
            <li :class="[gameListSelected[gameList.game_id] ? 'selected' : '']"
              v-for="gameList in authListData.game_list" :key="gameList.game_id"
                @click="gameListSelect(gameList.game_id)"
                > 
              {{'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)
这样得到的数据就是排好了序的

你可能感兴趣的:(web前端)