opensource/RuoYi-Vue-Plus
2
0
Fork 1
mirror of https://gitee.com/dromara/RuoYi-Vue-Plus.git synced 2026-09-21 02:25:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

前端适配多字段排序功能案例OSS页面（重新排序需点击重置按钮，否则按照点击顺序依次排序，重复点击的字段排序位置不发生改变）

Browse Source
This commit is contained in:
抓蛙师 2022-09-20 11:36:09 +08:00
parent 390edc5e3e
commit 010f76a39d
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ruoyi-ui/src/views/system/oss/index.vue
View File

@ -118,7 +118,8 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="ossList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> <el-table v-loading="loading" :data="ossList" @selection-change="handleSelectionChange"
:default-sort="defaultSort" @sort-change="handleSortChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="对象存储主键" align="center" prop="ossId" v-if="false"/> <el-table-column label="对象存储主键" align="center" prop="ossId" v-if="false"/>
<el-table-column label="文件名" align="center" prop="fileName" /> <el-table-column label="文件名" align="center" prop="fileName" />
@ -135,13 +136,15 @@
v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource"/> v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180"> <el-table-column label="创建时间" align="center" prop="createTime" width="180"
sortable="custom" :sort-orders="['descending', 'ascending']">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="上传人" align="center" prop="createBy" /> <el-table-column label="上传人" align="center" prop="createBy" />
<el-table-column label="服务商" align="center" prop="service" sortable="custom" :sort-orders="['descending', 'ascending']" /> <el-table-column label="服务商" align="center" prop="service"
sortable="custom" :sort-orders="['descending', 'ascending']"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -293,6 +296,7 @@ export default {
resetQuery() { resetQuery() {
this.daterangeCreateTime = []; this.daterangeCreateTime = [];
this.resetForm("queryForm"); this.resetForm("queryForm");
this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
this.handleQuery(); this.handleQuery();
}, },
// 多选框选中数据 // 多选框选中数据
@ -302,9 +306,21 @@ export default {
this.multiple = !selection.length this.multiple = !selection.length
}, },
/** 排序触发事件 */ /** 排序触发事件 */
handleSortChange(column, prop, order) { handleSortChange({column, prop, order}) {
this.queryParams.orderByColumn = column.prop; let orderByArr = this.queryParams.orderByColumn ? this.queryParams.orderByColumn.split(",") : [];
this.queryParams.isAsc = column.order; let isAscArr = this.queryParams.isAsc ? this.queryParams.isAsc.split(",") : [];
let propIndex = orderByArr.indexOf(prop)
if (propIndex !== -1) {
//排序里已存在 只修改排序
isAscArr[propIndex] = order;
} else {
//排序里不存在则新增排序
orderByArr.push(prop);
isAscArr.push(order);
}
//合并排序
this.queryParams.orderByColumn = orderByArr.join(",");
this.queryParams.isAsc = isAscArr.join(",");
this.getList(); this.getList();
}, },
/** 任务日志列表查询 */ /** 任务日志列表查询 */