From 239d8202ea0f1972b52a40ce816588a35b4a9f0a Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 3 Jun 2024 18:03:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=9E=E9=80=80=E8=87=B3genTree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scTable/index.vue | 1076 +++++++++++++-----------------
 1 file changed, 452 insertions(+), 624 deletions(-)

diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index 5b4937ad..31e57499 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -8,174 +8,74 @@
 -->
 
 <template>
-	<div
-		class="scTable"
-		:style="{ height: _height }"
-		ref="scTableMain"
-		v-loading="loading"
-	>
-		<div class="scTable-table" :style="{ height: _table_height }">
-			<el-table
-				v-bind="$attrs"
-				:data="tableData"
-				:row-key="rowKey"
-				:key="toggleIndex"
-				ref="scTable"
-				:height="height == 'auto' ? null : '100%'"
-				:size="config.size"
-				:border="config.border"
-				:stripe="config.stripe"
-				:summary-method="
-					remoteSummary ? remoteSummaryMethod : summaryMethod
-				"
-				@sort-change="sortChange"
-				@filter-change="filterChange"
-				@selection-change="selectionChange"
-			>
-				<slot></slot>
-				<template v-for="(item, index) in userColumn" :key="index">
-					<el-table-column
-						v-if="!item.hide"
-						:column-key="item.prop"
-						:label="item.label"
-						:prop="item.prop"
-						:width="item.width"
-						:sortable="item.sortable"
-						:fixed="item.fixed"
-						:filters="item.filters"
-						:filter-method="
-							remoteFilter || !item.filters ? null : filterHandler
-						"
-						:show-overflow-tooltip="item.showOverflowTooltip"
-					>
-						<template #default="scope">
-							<slot :name="item.prop" v-bind="scope">
-								{{ scope.row[item.prop] }}
-							</slot>
-						</template>
-					</el-table-column>
-				</template>
-				<el-table-column min-width="1"></el-table-column>
+  <div class="scTable" :style="{ height: _height }" ref="scTableMain" v-loading="loading">
+    <div class="scTable-table" :style="{ height: _table_height }">
+      <el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable"
+        :height="height == 'auto' ? null : '100%'" :size="config.size" :border="config.border" :stripe="config.stripe"
+        :summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod" @sort-change="sortChange"
+        @filter-change="filterChange" @selection-change="selectionChange">
+        <slot></slot>
+        <template v-for="(item, index) in userColumn" :key="index">
+          <el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop"
+            :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter || !item.filters ? null : filterHandler
+    " :show-overflow-tooltip="item.showOverflowTooltip">
+            <template #default="scope">
+              <slot :name="item.prop" v-bind="scope">
+                {{ scope.row[item.prop] }}
+              </slot>
+            </template>
+          </el-table-column>
+        </template>
+        <el-table-column min-width="1"></el-table-column>
 
-				<template #empty>
-					<el-empty
-						:description="emptyText"
-						:image-size="100"
-					></el-empty>
-				</template>
-			</el-table>
-		</div>
-		<div class="scTable-page" v-if="!hidePagination || !hideDo">
-			<div class="scTable-pagination">
-				<el-pagination
-					v-if="!hidePagination"
-					background
-					:small="true"
-					:layout="paginationLayout"
-					:total="total"
-					:page-size="scPageSize"
-					:page-sizes="pageSizes"
-					v-model:currentPage="currentPage"
-					@current-change="paginationChange"
-					@update:page-size="pageSizeChange"
-				></el-pagination>
-			</div>
-			<div class="scTable-do" v-if="!hideDo">
-				<span v-show="selectNum > 0"
-					>已选择
-					<span style="font-weight: bold">{{ selectNum }}</span>
-					项</span
-				>
-				<el-button
-					v-if="!hideRefresh"
-					@click="refresh"
-					icon="el-icon-refresh"
-					circle
-					style="margin-left: 15px"
-				>
-				</el-button>
-				<el-button
-					v-if="!hideRefresh"
-					@click="reload"
-					icon="el-icon-refresh-right"
-					circle
-					style="margin-left: 15px"
-				>
-				</el-button>
-				<el-popover
-					v-if="column"
-					placement="top"
-					title="列设置"
-					:width="500"
-					trigger="click"
-					:hide-after="0"
-					@show="customColumnShow = true"
-					@after-leave="customColumnShow = false"
-				>
-					<template #reference>
-						<el-button
-							icon="el-icon-set-up"
-							circle
-							style="margin-left: 15px"
-						></el-button>
-					</template>
-					<columnSetting
-						v-if="customColumnShow"
-						ref="columnSetting"
-						@userChange="columnSettingChange"
-						@save="columnSettingSave"
-						@back="columnSettingBack"
-						:column="userColumn"
-					></columnSetting>
-				</el-popover>
-				<el-popover
-					v-if="!hideSetting"
-					placement="top"
-					title="表格设置"
-					:width="400"
-					trigger="click"
-					:hide-after="0"
-				>
-					<template #reference>
-						<el-button
-							icon="el-icon-setting"
-							circle
-							style="margin-left: 15px"
-						></el-button>
-					</template>
-					<el-form label-width="80px" label-position="left">
-						<el-form-item label="表格尺寸">
-							<el-radio-group
-								v-model="config.size"
-								size="small"
-								@change="configSizeChange"
-							>
-								<el-radio-button label="large"
-									>大</el-radio-button
-								>
-								<el-radio-button label="default"
-									>正常</el-radio-button
-								>
-								<el-radio-button label="small"
-									>小</el-radio-button
-								>
-							</el-radio-group>
-						</el-form-item>
-						<el-form-item label="样式">
-							<el-checkbox
-								v-model="config.border"
-								label="纵向边框"
-							></el-checkbox>
-							<el-checkbox
-								v-model="config.stripe"
-								label="斑马纹"
-							></el-checkbox>
-						</el-form-item>
-					</el-form>
-				</el-popover>
-			</div>
-		</div>
-	</div>
+        <template #empty>
+          <el-empty :description="emptyText" :image-size="100"></el-empty>
+        </template>
+      </el-table>
+    </div>
+    <div class="scTable-page" v-if="!hidePagination || !hideDo">
+      <div class="scTable-pagination">
+        <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total"
+          :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage"
+          @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
+      </div>
+      <div class="scTable-do" v-if="!hideDo">
+        <span v-show="selectNum>0">已选择 <span style="font-weight: bold">{{selectNum}}</span> 项</span>
+        <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left: 15px">
+        </el-button>
+        <el-button v-if="!hideRefresh" @click="reload" icon="el-icon-refresh-right" circle style="margin-left: 15px">
+        </el-button>
+        <el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0"
+          @show="customColumnShow = true" @after-leave="customColumnShow = false">
+
+          <template #reference>
+            <el-button icon="el-icon-set-up" circle style="margin-left: 15px"></el-button>
+          </template>
+          <columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange"
+            @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
+        </el-popover>
+        <el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
+
+          <template #reference>
+            <el-button icon="el-icon-setting" circle style="margin-left: 15px"></el-button>
+          </template>
+          <el-form label-width="80px" label-position="left">
+            <el-form-item label="表格尺寸">
+              <el-radio-group v-model="config.size" size="small" @change="configSizeChange">
+                <el-radio-button label="large">大</el-radio-button>
+                <el-radio-button label="default">正常</el-radio-button>
+                <el-radio-button label="small">小</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="样式">
+              <el-checkbox v-model="config.border" label="纵向边框"></el-checkbox>
+              <el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
+            </el-form-item>
+          </el-form>
+        </el-popover>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -184,483 +84,411 @@ import columnSetting from "./columnSetting";
 import { genTree } from "@/utils/verificate";
 
 export default {
-	name: "scTable",
-	components: {
-		columnSetting,
-	},
-	props: {
-		tableName: { type: String, default: "" },
-		apiObj: { type: Object, default: () => {} },
-		params: { type: Object, default: () => ({}) },
-		data: { type: Object, default: () => {} },
-		height: { type: [String, Number], default: "100%" },
-		size: { type: String, default: "default" },
-		border: { type: Boolean, default: false },
-		stripe: { type: Boolean, default: true },
-		pageSize: { type: Number, default: config.pageSize },
-		pageSizes: { type: Array, default: config.pageSizes },
-		pageStr: { type: String, default: config.request.page },
-		pageSizeStr: { type: String, default: config.request.pageSize },
-		orderStr: { type: String, default: config.request.order },
-		isTree: { type: Boolean, default: false },
-		parseData: { type: Function, default: config.parseData },
-		rowKey: { type: String, default: "" },
-		summaryMethod: { type: Function, default: null },
-		column: { type: Object, default: () => {} },
-		remoteSort: { type: Boolean, default: false },
-		remoteFilter: { type: Boolean, default: false },
-		remoteSummary: { type: Boolean, default: false },
-		hidePagination: { type: Boolean, default: false },
-		hideDo: { type: Boolean, default: false },
-		hideRefresh: { type: Boolean, default: false },
-		hideSetting: { type: Boolean, default: false },
-		paginationLayout: { type: String, default: config.paginationLayout },
-	},
-	watch: {
-		//监听从props里拿到值了
-		data() {
-			this.tableData = this.data;
-			this.total = this.tableData.length;
-		},
-		apiObj() {
-			// this.tableParams = this.params;
-			this.refresh();
-		},
-	},
-	computed: {
-		_height() {
-			return Number(this.height)
-				? Number(this.height) + "px"
-				: this.height;
-		},
-		_table_height() {
-			return this.hidePagination && this.hideDo
-				? "100%"
-				: "calc(100% - 50px)";
-		},
-	},
-	data() {
-		return {
-			scPageSize: this.pageSize,
-			isActivat: true,
-			emptyText: "暂无数据",
-			toggleIndex: 0,
-			tableData: [],
-			total: 0,
-			currentPage: 1,
-			prop: null,
-			order: null,
-			loading: false,
-			tableHeight: "100%",
-			tableParams: this.params,
-			userColumn: [],
-			customColumnShow: false,
-			summary: {},
-			config: {
-				size: this.size,
-				border: true,
-				stripe: this.stripe,
-			},
-			selectNum: 0,
-		};
-	},
-	mounted() {
-		//判断是否开启自定义列
-		if (this.column) {
-			this.getCustomColumn();
-		} else {
-			this.userColumn = this.column;
-		}
-		//判断是否静态数据
-		if (this.apiObj) {
-			this.getData();
-		} else if (this.data) {
-			if (this.isTree) {
-				let posts = [];
-				this.data.forEach((item) => {
-					let obj = new Object();
-					obj = { ...item };
-					obj.parentId = item.parent;
-					obj.children = [];
-					posts.push(obj);
-				});
-				for (let i = 0; i < posts.length; i++) {
-					if (posts[i].parentId !== null) {
-						for (let j = 0; j < posts.length; j++) {
-							if (posts[j].id === posts[i].parentId) {
-								posts[j].children.push(posts[i]);
-								break;
-							}
-						}
-					}
-				}
-				console.log("posts", posts);
-				const lists = [...posts];
-				console.log("lists", lists);
-				this.tableData = lists.filter((list) => list.parentId === null);
-				console.log("postsss", postsss);
-			} else {
-				this.tableData = this.data;
-			}
-			this.total = this.tableData.length;
-		}
-	},
-	activated() {
-		if (!this.isActivat) {
-			this.$refs.scTable.doLayout();
-		}
-	},
-	deactivated() {
-		this.isActivat = false;
-	},
-	methods: {
-		//获取列
-		async getCustomColumn() {
-			const userColumn = await config.columnSettingGet(
-				this.tableName,
-				this.column
-			);
-			this.userColumn = userColumn;
-		},
-		//获取数据
-		async getData() {
-			this.loading = true;
-			var reqData = {
-				[this.pageStr]: this.currentPage,
-				[this.pageSizeStr]: this.scPageSize,
-				// [config.request.prop]: this.prop,
-				[this.orderStr]: this.order,
-			};
-			if (this.hidePagination) {
-				reqData[this.pageStr] = 0;
-				// delete reqData[config.request.page]
-				// delete reqData[config.request.pageSize]
-			}
-			var c = Object.assign({}, this.tableParams, reqData);
-			try {
-				if (this.apiObj) {
-					var res = await this.apiObj.req(c);
-					var response = this.parseData(res);
-					if (response.total === 0) {
-						this.emptyText = "暂无数据";
-					}
-					let dataList = null;
-					if (this.hidePagination) {
-						dataList = response.data || [];
-					} else {
-						dataList = response.rows;
-					}
-					if (this.isTree) {
-						let posts = [];
-						dataList.forEach((item) => {
-							let obj = new Object();
-							obj = { ...item };
-							obj.parentId = item.parent;
-							obj.children = [];
-							posts.push(obj);
-						});
-						for (let i = 0; i < posts.length; i++) {
-							if (posts[i].parentId !== null) {
-								for (let j = 0; j < posts.length; j++) {
-									if (posts[j].id === posts[i].parentId) {
-										posts[j].children.push(posts[i]);
-										break;
-									}
-								}
-							}
-						}
-						console.log("posts", posts);
-						const lists = [...posts];
-						console.log("lists", lists);
-						this.tableData = lists.filter(
-							(list) => list.parentId === null
-						);
-						console.log("postsss", postsss);
-					} else {
-						this.tableData = dataList || [];
-					}
-					this.total = response.total || 0;
-					this.summary = response.summary || {};
-					this.loading = false;
-					// if(!this.hidePagination){
-					//   this.$refs.scTable.setScrollTop(0);
-					// }
-					this.$emit("dataChange", res, this.tableData);
-				}
-			} catch (error) {
-				this.loading = false;
-				if (error.response && error.response.data) {
-					this.emptyText = error.response.data.err_msg;
-				} else {
-					this.emptyText = error.statusText || "数据格式错误";
-				}
-				return false;
-			}
-		},
-		redata(postList) {
-			let posts = [];
-			postList.forEach((item) => {
-				let obj = new Object();
-				obj = { ...item };
-				obj.parentId = item.parent;
-				posts.push(obj);
-			});
-			let obj = posts.reduce((res, v) => ((res[v.id] = v), res), {}); //Object
-			let arr = [];
-			for (let item of posts) {
-				if (item.parentId == null) {
-					arr.push(item);
-					continue;
-				}
-				let parent = obj[item.parentId];
-				parent.children = parent.children ? parent.children : [];
-				parent.children.push(item);
-			}
-			console.log(arr);
-			return arr;
-		},
-		//分页点击
-		paginationChange() {
-			this.getData();
-		},
-		//条数变化
-		pageSizeChange(size) {
-			this.scPageSize = size;
-			this.getData();
-		},
-		//刷新数据
-		refresh() {
-			this.$refs.scTable.clearSelection();
-			this.getData();
-		},
-		//查询数据 追加query
-		upData(query, page = 1) {
-			this.currentPage = page;
-			this.$refs.scTable.clearSelection();
-			Object.assign(this.tableParams, query);
-			this.getData();
-		},
-		//查询数据 追加query 去除列filter
-		queryData(query, page = 1) {
-			this.currentPage = page;
-			Object.assign(this.tableParams, query);
-			this.$refs.scTable.clearSelection();
-			this.$refs.scTable.clearFilter();
-			this.getData();
-		},
-		//重载数据 tableParams变为固定的params
-		reload() {
-			this.currentPage = 1;
-			this.tableParams = Object.assign({}, this.params);
-			this.$refs.scTable.clearSelection();
-			this.$refs.scTable.clearSort();
-			this.$refs.scTable.clearFilter();
-			this.getData();
-			this.$emit("resetQuery");
-		},
-		//自定义变化事件
-		columnSettingChange(userColumn) {
-			this.userColumn = userColumn;
-			this.toggleIndex += 1;
-		},
-		//自定义列保存
-		async columnSettingSave(userColumn) {
-			this.$refs.columnSetting.isSave = true;
-			try {
-				await config.columnSettingSave(this.tableName, userColumn);
-			} catch (error) {
-				this.$message.error("保存失败");
-				this.$refs.columnSetting.isSave = false;
-			}
-			this.$message.success("保存成功");
-			this.$refs.columnSetting.isSave = false;
-		},
-		//自定义列重置
-		async columnSettingBack() {
-			this.$refs.columnSetting.isSave = true;
-			try {
-				const column = await config.columnSettingReset(
-					this.tableName,
-					this.column
-				);
-				this.userColumn = column;
-				this.$refs.columnSetting.usercolumn = JSON.parse(
-					JSON.stringify(this.userColumn || [])
-				);
-			} catch (error) {
-				this.$message.error("重置失败");
-				this.$refs.columnSetting.isSave = false;
-			}
-			this.$refs.columnSetting.isSave = false;
-		},
-		//排序事件
-		sortChange(obj) {
-			if (!this.remoteSort) {
-				return false;
-			}
-			if (obj.column && obj.prop) {
-				// this.prop = obj.prop
-				if (obj.order == "descending") {
-					this.order = "-" + obj.prop;
-				} else {
-					this.order = obj.prop;
-				}
-				// this.order = obj.order
-			} else {
-				// this.prop = null
-				this.order = null;
-			}
-			this.getData();
-		},
-		// select事件
-		selectionChange(rows) {
-			this.selectNum = rows.length;
-		},
-		//本地过滤
-		filterHandler(value, row, column) {
-			const property = column.property;
-			return row[property] === value;
-		},
-		//过滤事件
-		filterChange(filters) {
-			if (!this.remoteFilter) {
-				return false;
-			}
-			Object.keys(filters).forEach((key) => {
-				filters[key] = filters[key].join(",");
-			});
-			this.upData(filters);
-		},
-		//远程合计行处理
-		remoteSummaryMethod(param) {
-			const { columns } = param;
-			const sums = [];
-			columns.forEach((column, index) => {
-				if (index === 0) {
-					sums[index] = "合计";
-					return;
-				}
-				const values = this.summary[column.property];
-				if (values) {
-					sums[index] = values;
-				} else {
-					sums[index] = "";
-				}
-			});
-			return sums;
-		},
-		configSizeChange() {
-			this.$refs.scTable.doLayout();
-		},
-		//插入行 unshiftRow
-		unshiftRow(row) {
-			this.tableData.unshift(row);
-		},
-		//插入行 pushRow
-		pushRow(row) {
-			this.tableData.push(row);
-		},
-		//根据key覆盖数据
-		updateKey(row, rowKey = this.rowKey) {
-			this.tableData
-				.filter((item) => item[rowKey] === row[rowKey])
-				.forEach((item) => {
-					Object.assign(item, row);
-				});
-		},
-		//根据index覆盖数据
-		updateIndex(row, index) {
-			Object.assign(this.tableData[index], row);
-		},
-		//根据index删除
-		removeIndex(index) {
-			this.tableData.splice(index, 1);
-		},
-		//根据index批量删除
-		removeIndexes(indexes = []) {
-			indexes.forEach((index) => {
-				this.tableData.splice(index, 1);
-			});
-		},
-		//根据key删除
-		removeKey(key, rowKey = this.rowKey) {
-			this.tableData.splice(
-				this.tableData.findIndex((item) => item[rowKey] === key),
-				1
-			);
-		},
-		//根据keys批量删除
-		removeKeys(keys = [], rowKey = this.rowKey) {
-			keys.forEach((key) => {
-				this.tableData.splice(
-					this.tableData.findIndex((item) => item[rowKey] === key),
-					1
-				);
-			});
-		},
-		//原生方法转发
-		clearSelection() {
-			this.$refs.scTable.clearSelection();
-		},
-		toggleRowSelection(row, selected) {
-			this.$refs.scTable.toggleRowSelection(row, selected);
-		},
-		toggleAllSelection() {
-			this.$refs.scTable.toggleAllSelection();
-		},
-		toggleRowExpansion(row, expanded) {
-			this.$refs.scTable.toggleRowExpansion(row, expanded);
-		},
-		setCurrentRow(row) {
-			this.$refs.scTable.setCurrentRow(row);
-		},
-		clearSort() {
-			this.$refs.scTable.clearSort();
-		},
-		clearFilter(columnKey) {
-			this.$refs.scTable.clearFilter(columnKey);
-		},
-		doLayout() {
-			this.$refs.scTable.doLayout();
-		},
-		sort(prop, order) {
-			this.$refs.scTable.sort(prop, order);
-		},
-	},
+  name: "scTable",
+  components: {
+    columnSetting,
+  },
+  props: {
+    tableName: { type: String, default: "" },
+    apiObj: { type: Object, default: () => { } },
+    params: { type: Object, default: () => ({}) },
+    data: { type: Object, default: () => { } },
+    height: { type: [String, Number], default: "100%" },
+    size: { type: String, default: "default" },
+    border: { type: Boolean, default: false },
+    stripe: { type: Boolean, default: true },
+    pageSize: { type: Number, default: config.pageSize },
+    pageSizes: { type: Array, default: config.pageSizes },
+    pageStr: { type: String, default: config.request.page },
+    pageSizeStr: { type: String, default: config.request.pageSize },
+    orderStr: { type: String, default: config.request.order },
+    isTree: { type: Boolean, default: false },
+    parseData: { type: Function, default: config.parseData },
+    rowKey: { type: String, default: "" },
+    summaryMethod: { type: Function, default: null },
+    column: { type: Object, default: () => { } },
+    remoteSort: { type: Boolean, default: false },
+    remoteFilter: { type: Boolean, default: false },
+    remoteSummary: { type: Boolean, default: false },
+    hidePagination: { type: Boolean, default: false },
+    hideDo: { type: Boolean, default: false },
+    hideRefresh: { type: Boolean, default: false },
+    hideSetting: { type: Boolean, default: false },
+    paginationLayout: { type: String, default: config.paginationLayout },
+  },
+  watch: {
+    //监听从props里拿到值了
+    data() {
+      this.tableData = this.data;
+      this.total = this.tableData.length;
+    },
+    apiObj() {
+      // this.tableParams = this.params;
+      this.refresh();
+    },
+  },
+  computed: {
+    _height() {
+      return Number(this.height) ? Number(this.height) + "px" : this.height;
+    },
+    _table_height() {
+      return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)";
+    },
+  },
+  data() {
+    return {
+      scPageSize: this.pageSize,
+      isActivat: true,
+      emptyText: "暂无数据",
+      toggleIndex: 0,
+      tableData: [],
+      total: 0,
+      currentPage: 1,
+      prop: null,
+      order: null,
+      loading: false,
+      tableHeight: "100%",
+      tableParams: this.params,
+      userColumn: [],
+      customColumnShow: false,
+      summary: {},
+      config: {
+        size: this.size,
+        border: true,
+        stripe: this.stripe,
+      },
+      selectNum: 0
+    };
+  },
+  mounted() {
+    //判断是否开启自定义列
+    if (this.column) {
+      this.getCustomColumn();
+    } else {
+      this.userColumn = this.column;
+    }
+    //判断是否静态数据
+    if (this.apiObj) {
+      this.getData();
+    } else if (this.data) {
+      if (this.isTree) {
+        this.tableData = genTree(this.data);
+      } else {
+        this.tableData = this.data;
+      }
+      this.total = this.tableData.length;
+    }
+  },
+  activated() {
+    if (!this.isActivat) {
+      this.$refs.scTable.doLayout();
+    }
+  },
+  deactivated() {
+    this.isActivat = false;
+  },
+  methods: {
+    //获取列
+    async getCustomColumn() {
+      const userColumn = await config.columnSettingGet(
+        this.tableName,
+        this.column
+      );
+      this.userColumn = userColumn;
+    },
+    //获取数据
+    async getData() {
+      this.loading = true;
+      var reqData = {
+        [this.pageStr]: this.currentPage,
+        [this.pageSizeStr]: this.scPageSize,
+        // [config.request.prop]: this.prop,
+        [this.orderStr]: this.order,
+      };
+      if (this.hidePagination) {
+        reqData[this.pageStr] = 0;
+        // delete reqData[config.request.page]
+        // delete reqData[config.request.pageSize]
+      }
+      var c = Object.assign({}, this.tableParams, reqData)
+      try {
+        if (this.apiObj) {
+          var res = await this.apiObj.req(c);
+          var response = this.parseData(res);
+          if (response.total === 0) {
+            this.emptyText = "暂无数据";
+          }
+          let dataList = null;
+          if (this.hidePagination) {
+            dataList = response.data || [];
+          } else {
+            dataList = response.rows;
+          }
+          if (this.isTree) {
+            this.tableData = genTree(dataList);
+          } else {
+            this.tableData = dataList || [];
+          }
+          this.total = response.total || 0;
+          this.summary = response.summary || {};
+          this.loading = false;
+          // if(!this.hidePagination){
+          //   this.$refs.scTable.setScrollTop(0);
+          // }
+          this.$emit("dataChange", res, this.tableData);
+        }
+      } catch (error) {
+        console.log(error);
+        this.loading = false;
+        if (error.response && error.response.data) {
+          this.emptyText = error.response.data.err_msg;
+        } else {
+          this.emptyText = error.statusText || "数据格式错误";
+        }
+        return false;
+      }
+    },
+    //分页点击
+    paginationChange() {
+      this.getData();
+    },
+    //条数变化
+    pageSizeChange(size) {
+      this.scPageSize = size;
+      this.getData();
+    },
+    //刷新数据
+    refresh() {
+      this.$refs.scTable.clearSelection();
+      this.getData();
+    },
+    //查询数据 追加query
+    upData(query, page = 1) {
+      this.currentPage = page;
+      this.$refs.scTable.clearSelection();
+      Object.assign(this.tableParams, query);
+      this.getData();
+    },
+    //查询数据 追加query 去除列filter
+    queryData(query, page = 1) {
+      this.currentPage = page;
+      Object.assign(this.tableParams, query);
+      this.$refs.scTable.clearSelection();
+      this.$refs.scTable.clearFilter();
+      this.getData();
+    },
+    //重载数据 tableParams变为固定的params
+    reload() {
+      this.currentPage = 1;
+      this.tableParams = Object.assign({}, this.params);
+      this.$refs.scTable.clearSelection();
+      this.$refs.scTable.clearSort();
+      this.$refs.scTable.clearFilter();
+      this.getData();
+      this.$emit("resetQuery");
+    },
+    //自定义变化事件
+    columnSettingChange(userColumn) {
+      this.userColumn = userColumn;
+      this.toggleIndex += 1;
+    },
+    //自定义列保存
+    async columnSettingSave(userColumn) {
+      this.$refs.columnSetting.isSave = true;
+      try {
+        await config.columnSettingSave(this.tableName, userColumn);
+      } catch (error) {
+        this.$message.error("保存失败");
+        this.$refs.columnSetting.isSave = false;
+      }
+      this.$message.success("保存成功");
+      this.$refs.columnSetting.isSave = false;
+    },
+    //自定义列重置
+    async columnSettingBack() {
+      this.$refs.columnSetting.isSave = true;
+      try {
+        const column = await config.columnSettingReset(
+          this.tableName,
+          this.column
+        );
+        this.userColumn = column;
+        this.$refs.columnSetting.usercolumn = JSON.parse(
+          JSON.stringify(this.userColumn || [])
+        );
+      } catch (error) {
+        this.$message.error("重置失败");
+        this.$refs.columnSetting.isSave = false;
+      }
+      this.$refs.columnSetting.isSave = false;
+    },
+    //排序事件
+    sortChange(obj) {
+      if (!this.remoteSort) {
+        return false;
+      }
+      if (obj.column && obj.prop) {
+        // this.prop = obj.prop
+        if (obj.order == "descending") {
+          this.order = "-" + obj.prop;
+        } else {
+          this.order = obj.prop;
+        }
+        // this.order = obj.order
+      } else {
+        // this.prop = null
+        this.order = null;
+      }
+      this.getData();
+    },
+    // select事件
+    selectionChange(rows){
+      this.selectNum = rows.length;
+    },
+    //本地过滤
+    filterHandler(value, row, column) {
+      const property = column.property;
+      return row[property] === value;
+    },
+    //过滤事件
+    filterChange(filters) {
+      if (!this.remoteFilter) {
+        return false;
+      }
+      Object.keys(filters).forEach((key) => {
+        filters[key] = filters[key].join(",");
+      });
+      this.upData(filters);
+    },
+    //远程合计行处理
+    remoteSummaryMethod(param) {
+      const { columns } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "合计";
+          return;
+        }
+        const values = this.summary[column.property];
+        if (values) {
+          sums[index] = values;
+        } else {
+          sums[index] = "";
+        }
+      });
+      return sums;
+    },
+    configSizeChange() {
+      this.$refs.scTable.doLayout();
+    },
+    //插入行 unshiftRow
+    unshiftRow(row) {
+      this.tableData.unshift(row);
+    },
+    //插入行 pushRow
+    pushRow(row) {
+      this.tableData.push(row);
+    },
+    //根据key覆盖数据
+    updateKey(row, rowKey = this.rowKey) {
+      this.tableData
+        .filter((item) => item[rowKey] === row[rowKey])
+        .forEach((item) => {
+          Object.assign(item, row);
+        });
+    },
+    //根据index覆盖数据
+    updateIndex(row, index) {
+      Object.assign(this.tableData[index], row);
+    },
+    //根据index删除
+    removeIndex(index) {
+      this.tableData.splice(index, 1);
+    },
+    //根据index批量删除
+    removeIndexes(indexes = []) {
+      indexes.forEach((index) => {
+        this.tableData.splice(index, 1);
+      });
+    },
+    //根据key删除
+    removeKey(key, rowKey = this.rowKey) {
+      this.tableData.splice(
+        this.tableData.findIndex((item) => item[rowKey] === key),
+        1
+      );
+    },
+    //根据keys批量删除
+    removeKeys(keys = [], rowKey = this.rowKey) {
+      keys.forEach((key) => {
+        this.tableData.splice(
+          this.tableData.findIndex((item) => item[rowKey] === key),
+          1
+        );
+      });
+    },
+    //原生方法转发
+    clearSelection() {
+      this.$refs.scTable.clearSelection();
+    },
+    toggleRowSelection(row, selected) {
+      this.$refs.scTable.toggleRowSelection(row, selected);
+    },
+    toggleAllSelection() {
+      this.$refs.scTable.toggleAllSelection();
+    },
+    toggleRowExpansion(row, expanded) {
+      this.$refs.scTable.toggleRowExpansion(row, expanded);
+    },
+    setCurrentRow(row) {
+      this.$refs.scTable.setCurrentRow(row);
+    },
+    clearSort() {
+      this.$refs.scTable.clearSort();
+    },
+    clearFilter(columnKey) {
+      this.$refs.scTable.clearFilter(columnKey);
+    },
+    doLayout() {
+      this.$refs.scTable.doLayout();
+    },
+    sort(prop, order) {
+      this.$refs.scTable.sort(prop, order);
+    },
+  },
 };
 </script>
 
 <style scoped>
-.scTable {
-}
+.scTable {}
 
 .scTable-table {
-	height: calc(100% - 50px);
+  height: calc(100% - 50px);
 }
 
 .scTable-page {
-	height: 50px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 15px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
 }
 
 .scTable-do {
-	white-space: nowrap;
+  white-space: nowrap;
 }
 
 .scTable:deep(.el-table__footer) .cell {
-	font-weight: bold;
+  font-weight: bold;
 }
 
 .scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
-	height: 12px;
-	border-radius: 12px;
+  height: 12px;
+  border-radius: 12px;
 }
 
 .scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
-	width: 12px;
-	border-radius: 12px;
+  width: 12px;
+  border-radius: 12px;
 }
 </style>