From 8ff3f6b0ffe578c87373ae23a6a2e3240b42baf3 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Thu, 4 Nov 2021 16:13:38 +0800
Subject: [PATCH] =?UTF-8?q?UPD=20scTable=20=E5=A2=9E=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=9F=A5=E8=AF=A2=E6=8F=92=E7=B3=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scTableSelect/index.vue | 22 +++++++++++++++++-----
 src/views/vab/tableselect.vue          | 23 +++++++++++++++++++++--
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/scTableSelect/index.vue b/src/components/scTableSelect/index.vue
index 2b61ce1c..5957d5e9 100644
--- a/src/components/scTableSelect/index.vue
+++ b/src/components/scTableSelect/index.vue
@@ -1,16 +1,19 @@
 <!--
  * @Descripttion: 表格选择器组件
- * @version: 1.0
+ * @version: 1.1
  * @Author: sakuya
  * @Date: 2021年6月10日10:04:07
- * @LastEditors:
- * @LastEditTime:
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年11月4日16:09:05
 -->
 
 <template>
 	<el-select ref="select" v-model="defaultValue" clearable :multiple="multiple" filterable :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
 		<template #empty>
 			<div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading">
+				<div class="sc-table-select__header">
+					<slot name="header" :form="formData" :submit="formSubmit"></slot>
+				</div>
 				<el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll">
 					<el-table-column v-if="multiple" type="selection" width="45"></el-table-column>
 					<el-table-column v-else type="index" width="45">
@@ -56,7 +59,8 @@
 					page: config.request.page,
 					pageSize: config.request.pageSize,
 					keyword: config.request.keyword
-				}
+				},
+				formData: {}
 			}
 		},
 		computed: {
@@ -81,6 +85,8 @@
 			visibleChange(visible){
 				if(visible){
 					this.currentPage = 1
+					this.keyword = null
+					this.formData = {}
 					this.getData()
 				}else{
 					this.autoCurrentLabel()
@@ -94,7 +100,7 @@
 					[this.defaultProps.pageSize]: this.pageSize,
 					[this.defaultProps.keyword]: this.keyword
 				}
-				Object.assign(reqData, this.params)
+				Object.assign(reqData, this.params, this.formData)
 				var res = await this.apiObj.get(reqData);
 				var parseData = config.parseData(res)
 				this.tableData = parseData.rows;
@@ -116,6 +122,12 @@
 					this.$refs.table.$el.querySelector('.el-table__body-wrapper').scrollTop = 0
 				})
 			},
+			//插糟表单提交
+			formSubmit(){
+				this.currentPage = 1
+				this.keyword = null
+				this.getData()
+			},
 			//分页刷新表格
 			reload(){
 				this.getData()
diff --git a/src/views/vab/tableselect.vue b/src/views/vab/tableselect.vue
index cd0ee78d..7308be27 100644
--- a/src/views/vab/tableselect.vue
+++ b/src/views/vab/tableselect.vue
@@ -18,9 +18,28 @@
 		</el-card>
 		<div style="height:15px"></div>
 		<el-card shadow="never" header="多选">
-			<sc-table-select v-model="value" :apiObj="apiObj" multiple :props="props">
+			<sc-table-select v-model="value" :apiObj="apiObj" :table-width="700" multiple :props="props">
+				<template #header="{form, submit}">
+					<el-form :inline="true" :model="form">
+						<el-form-item>
+							<el-select v-model="form.sex" placeholder="性别" clearable :popper-append-to-body="false">
+								<el-option label="男" value="1"></el-option>
+								<el-option label="女" value="2"></el-option>
+							</el-select>
+						</el-form-item>
+						<el-form-item>
+							<el-date-picker v-model="form.date" value-format="YYYY-MM-DD" type="date" placeholder="注册时间" :append-to-body="false"></el-date-picker>
+						</el-form-item>
+						<el-form-item>
+							<el-button type="primary" @click="submit">查询</el-button>
+						</el-form-item>
+					</el-form>
+					<el-alert title="自定义FORM插糟 传递了form对象和提交方法" type="info" />
+				</template>
 				<el-table-column prop="id" label="ID" width="150"></el-table-column>
-				<el-table-column prop="user" label="姓名"></el-table-column>
+				<el-table-column prop="user" label="姓名" width="100"></el-table-column>
+				<el-table-column prop="cip" label="最后请求IP" width="150"></el-table-column>
+				<el-table-column prop="time" label="注册时间"></el-table-column>
 			</sc-table-select>
 		</el-card>
 	</el-main>