From 50522a41df2e954ee24dcaf509f7e32d6eb201ff Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Fri, 16 Jul 2021 10:21:32 +0800
Subject: [PATCH] =?UTF-8?q?scTable=20=E5=A2=9E=E5=8A=A0remoteSort=20?=
 =?UTF-8?q?=E8=BF=9C=E7=A8=8B=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scTable/index.vue | 23 +++++++++++++++++++++--
 src/config/table.js              |  6 ++++--
 src/views/setting/user/index.vue | 12 ++++++------
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index 3edae384..9f681c99 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -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)
diff --git a/src/config/table.js b/src/config/table.js
index dbe9fa85..cde2bbb9 100644
--- a/src/config/table.js
+++ b/src/config/table.js
@@ -12,6 +12,8 @@ export default {
 	},
 	request: {							//请求规定字段
 		page: 'page',					//规定当前分页字段
-		pageSize: 'pageSize'			//规定一页条数字段
+		pageSize: 'pageSize',			//规定一页条数字段
+		prop: 'prop',					//规定排序字段名字段
+		order: 'order'					//规定排序规格字段
 	}
-}
+}
\ No newline at end of file
diff --git a/src/views/setting/user/index.vue b/src/views/setting/user/index.vue
index bba71203..6261725e 100644
--- a/src/views/setting/user/index.vue
+++ b/src/views/setting/user/index.vue
@@ -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>