web前端_Vue框架_js的sort排序和elementUI排序
在数据展现时我们常常需要对数据进行排序,如果项目中应用了elementUI并且是在table表格中,很好处理:default-sort = "{prop: 'id', order: 'Ascending'}"这个是官方默认的排序 在el-table中则整个table都是排好序的<template><el-table:data="
在数据展现时我们常常需要对数据进行排序,如果项目中应用了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)
这样得到的数据就是排好了序的
更多推荐
所有评论(0)