scTable 增加remoteSort 远程排序
This commit is contained in:
parent
5d4d9e9c2a
commit
50522a41df
|
@ -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)
|
||||
|
|
|
@ -12,6 +12,8 @@ export default {
|
|||
},
|
||||
request: { //请求规定字段
|
||||
page: 'page', //规定当前分页字段
|
||||
pageSize: 'pageSize' //规定一页条数字段
|
||||
pageSize: 'pageSize', //规定一页条数字段
|
||||
prop: 'prop', //规定排序字段名字段
|
||||
order: 'order' //规定排序规格字段
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue