From 29a9afffbf156b648c9a1a3958d743eced60bab0 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Tue, 30 Nov 2021 23:57:08 +0800
Subject: [PATCH] =?UTF-8?q?:triangular=5Fflag=5Fon=5Fpost:=20scTable?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8A=A8=E6=80=81=E6=A0=B7=E5=BC=8F=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scTable/index.vue | 57 +++++++++++++++++++++++++++-----
 src/style/fix.scss               |  1 +
 src/views/template/server.vue    |  2 +-
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index 13bf4231..1030958e 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -1,16 +1,16 @@
 <!--
  * @Descripttion: 数据表格组件
- * @version: 1.4
+ * @version: 1.5
  * @Author: sakuya
  * @Date: 2021年11月29日21:51:15
- * @LastEditors:
- * @LastEditTime:
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年12月1日11:05:48
 -->
 
 <template>
 	<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
 		<div class="scTable-table">
-			<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" height="100%" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
+			<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">
 				<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">
@@ -32,12 +32,31 @@
 				<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
 			</div>
 			<div class="scTable-do" v-if="!hideDo">
-				<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
-				<el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" @show="customColumnShow=true" @after-leave="customColumnShow=false">
+				<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" 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>
-					<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
+					<el-form label-width="80px" label-position="left">
+						<el-form-item label="表格尺寸">
+							<el-radio-group v-model="config.size" size="mini" @change="configSizeChange">
+								<el-radio-button label="large">大</el-radio-button>
+								<el-radio-button label="medium">中</el-radio-button>
+								<el-radio-button label="small">正常</el-radio-button>
+								<el-radio-button label="mini">小</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>
@@ -59,6 +78,9 @@
 			params: { type: Object, default: () => ({}) },
 			data: { type: Object, default: () => {} },
 			height: { type: [String,Number], default: "100%" },
+			size: { type: String, default: "small" },
+			border: { type: Boolean, default: false },
+			stripe: { type: Boolean, default: false },
 			pageSize: { type: Number, default: config.pageSize },
 			rowKey: { type: String, default: "" },
 			summaryMethod: { type: Function, default: null },
@@ -68,6 +90,8 @@
 			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: "total, prev, pager, next, jumper" },
 		},
 		watch: {
@@ -88,6 +112,7 @@
 		},
 		data() {
 			return {
+				isActivat: true,
 				emptyText: "暂无数据",
 				toggleIndex: 0,
 				tableData: [],
@@ -100,7 +125,12 @@
 				tableParams: this.params,
 				userColumn: [],
 				customColumnShow: false,
-				summary: {}
+				summary: {},
+				config: {
+					size: this.size,
+					border: this.border,
+					stripe: this.stripe
+				}
 			}
 		},
 		mounted() {
@@ -118,6 +148,14 @@
 				this.total = this.tableData.length
 			}
 		},
+		activated(){
+			if(!this.isActivat){
+				this.$refs.scTable.doLayout()
+			}
+		},
+		deactivated(){
+			this.isActivat = false;
+		},
 		methods: {
 			//获取列
 			async getCustomColumn(){
@@ -271,6 +309,9 @@
 				})
 				return sums
 			},
+			configSizeChange(){
+				this.$refs.scTable.doLayout()
+			},
 			//原生方法转发
 			clearSelection(){
 				this.$refs.scTable.clearSelection()
diff --git a/src/style/fix.scss b/src/style/fix.scss
index 317f7417..3cf0ad00 100644
--- a/src/style/fix.scss
+++ b/src/style/fix.scss
@@ -34,6 +34,7 @@
 .el-col .el-card {margin-bottom: 15px;}
 .el-icon {font-size: inherit;}
 .el-main {flex-basis: 100%;}
+.el-main > .scTable .el-table--border {border: 0;}
 
 /* 动态值 */
 .el-button--default:active, .el-button--default.is-plain:active {border-color: var(--el-color-primary-darken-1, #0d84ff);color: var(--el-color-primary-darken-1, #0d84ff);}
diff --git a/src/views/template/server.vue b/src/views/template/server.vue
index 6bf27727..e4cd0c9b 100644
--- a/src/views/template/server.vue
+++ b/src/views/template/server.vue
@@ -141,7 +141,7 @@
 				<el-tab-pane label="报警管理" lazy>
 					<el-main>
 						<el-card shadow="never" header="Event">
-							<scTable ref="table" :data="event" stripe>
+							<scTable ref="table" :data="event" stripe height="auto">
 								<el-table-column label="#" type="index" width="50"></el-table-column>
 								<el-table-column label="事件" prop="title" width="150"></el-table-column>
 								<el-table-column label="等级" prop="type" width="150"></el-table-column>