scTable 增加remoteSort 远程排序

This commit is contained in:
sc 2021-07-16 10:21:32 +08:00
parent 5d4d9e9c2a
commit 50522a41df
3 changed files with 31 additions and 10 deletions

View File

@ -1,7 +1,7 @@
<template>
<div class="scTable" ref="scTableMain" v-loading="loading">
<div class="scTable-table">
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @current-change="currentChange">
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange">
<slot></slot>
<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
<template #default="scope">
@ -50,6 +50,7 @@
data: { type: Object, default: () => {} },
rowKey: { type: String, default: "" },
column: { type: Object, default: () => {} },
remoteSort: { type: Boolean, default: false },
hidePagination: { type: Boolean, default: false },
hideDo: { type: Boolean, default: false },
stripe: { type: Boolean, default: false },
@ -75,6 +76,8 @@
pageSize: config.pageSize,
total: 0,
currentPage: 1,
prop: null,
order: null,
loading: false,
tableHeight:'100%',
tableParams: this.params,
@ -113,7 +116,9 @@
this.loading = true;
var reqData = {
[config.request.page]: this.currentPage,
[config.request.pageSize]: this.pageSize
[config.request.pageSize]: this.pageSize,
[config.request.prop]: this.prop,
[config.request.order]: this.order
}
Object.assign(reqData, this.tableParams)
try {
@ -159,6 +164,20 @@
this.$refs.columnSetting.remove(index)
this.toggleIndex += 1;
},
//
sortChange(obj){
if(!this.remoteSort){
return false
}
if(obj.column && obj.prop){
this.prop = obj.prop
this.order = obj.order
}else{
this.prop = null
this.order = null
}
this.getData()
},
//&
selectionChange(selection){
this.$emit('selection-change', selection)

View File

@ -12,6 +12,8 @@ export default {
},
request: { //请求规定字段
page: 'page', //规定当前分页字段
pageSize: 'pageSize' //规定一页条数字段
pageSize: 'pageSize', //规定一页条数字段
prop: 'prop', //规定排序字段名字段
order: 'order' //规定排序规格字段
}
}
}

View File

@ -26,18 +26,18 @@
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe>
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="ID" prop="id" width="80"></el-table-column>
<el-table-column label="ID" prop="id" width="80" sortable='custom'></el-table-column>
<el-table-column label="头像" width="80">
<template #default="scope">
<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
</template>
</el-table-column>
<el-table-column label="登录账号" prop="userName" width="150"></el-table-column>
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
<el-table-column label="所属角色" prop="groupName" width="200"></el-table-column>
<el-table-column label="加入时间" prop="date" width="150"></el-table-column>
<el-table-column label="登录账号" prop="userName" width="150" sortable='custom'></el-table-column>
<el-table-column label="姓名" prop="name" width="150" sortable='custom'></el-table-column>
<el-table-column label="所属角色" prop="groupName" width="200" sortable='custom'></el-table-column>
<el-table-column label="加入时间" prop="date" width="150" sortable='custom'></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="140">
<template #default="scope">
<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>