scTable 增加remoteSort 远程排序

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)

src/config/table.js

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

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="userName" width="150" sortable='custom'></el-table-column>
-						<el-table-column label="姓名" prop="name" width="150"></el-table-column>
+						<el-table-column label="姓名" prop="name" width="150" sortable='custom'></el-table-column>
-						<el-table-column label="所属角色" prop="groupName" width="200"></el-table-column>
+						<el-table-column label="所属角色" prop="groupName" width="200" sortable='custom'></el-table-column>
-						<el-table-column label="加入时间" prop="date" width="150"></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>