UPD scTable 增加自定义查询插糟

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()

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>