From fc1210ff1f4709f3c00b8e94d157b7dff87bd43e Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Thu, 10 Jun 2021 16:59:12 +0800
Subject: [PATCH] UP

---
 src/api/index.js                       |  4 +-
 src/components/scTableSelect/index.vue | 88 ++++++++++++++++++++++++++
 src/views/vab/tableselect.vue          | 58 ++++-------------
 3 files changed, 102 insertions(+), 48 deletions(-)
 create mode 100644 src/components/scTableSelect/index.vue

diff --git a/src/api/index.js b/src/api/index.js
index 1b487043..3adc09c3 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -113,8 +113,8 @@ const api = {
 		list: {
 			url: `${config.MOCK_URL}/loglist`,
 			name: "日志列表",
-			get: async function(){
-				return await http.get(this.url);
+			get: async function(params){
+				return await http.get(this.url, params);
 			}
 		}
 	},
diff --git a/src/components/scTableSelect/index.vue b/src/components/scTableSelect/index.vue
new file mode 100644
index 00000000..785e471e
--- /dev/null
+++ b/src/components/scTableSelect/index.vue
@@ -0,0 +1,88 @@
+<!--
+ * @Descripttion: 分页下拉组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年6月10日10:04:07
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-table-select">
+		<el-popover ref="popover" v-model:visible="visible" :width="500" placement="bottom-start">
+			<template #reference>
+				<div>
+					<el-input placeholder="请选择" readonly :class="{ 'is-focus': visible }" >
+						<template #suffix>
+							<i class="el-input__icon el-icon-arrow-up"></i>
+						</template>
+					</el-input>
+					<div class="sc-table-select__tags">
+						<el-tag type="info" size="mini" closable>超小标签</el-tag>
+						<el-tag type="info" size="mini" closable>超小标签</el-tag>
+					</div>
+				</div>
+			</template>
+			<div style="height:300px">
+				<el-table :data="tableData" :height="200">
+					<el-table-column type="selection" width="55"></el-table-column>
+					<el-table-column prop="date" label="日期" width="150"></el-table-column>
+					<el-table-column prop="name" label="姓名"></el-table-column>
+				</el-table>
+			</div>
+		</el-popover>
+	</div>
+
+
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: null,
+			mode: { type: String, default: "popover" },
+		},
+		data() {
+			return {
+				visible: false,
+				tableData: [{
+				            date: '2016-05-02',
+				            name: '王小虎',
+				            address: '上海市普陀区金沙江路 1518 弄'
+				          }, {
+				            date: '2016-05-04',
+				            name: '王小虎',
+				            address: '上海市普陀区金沙江路 1517 弄'
+				          }, {
+				            date: '2016-05-01',
+				            name: '王小虎',
+				            address: '上海市普陀区金沙江路 1519 弄'
+				          }, {
+				            date: '2016-05-03',
+				            name: '王小虎',
+				            address: '上海市普陀区金沙江路 1516 弄'
+				          }]
+			}
+		},
+		watch:{
+
+		},
+		mounted() {
+			console.log(this.$refs.popover);
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-table-select {position: relative;}
+
+	.sc-table-select .el-input.is-focus:deep(.el-input__inner)  {border-color: #409eff;}
+
+	.sc-table-select__tags {position: absolute;z-index: 1;top: 50%;transform: translateY(-50%);}
+	.sc-table-select__tags .el-tag {margin: 2px 0 2px 6px;border-color: transparent;background-color: #f0f2f5;}
+	.sc-table-select__tags .el-tag:deep(.el-icon-close)  {background-color: #c0c4cc;color: #fff;right: -7px;}
+	.sc-table-select__tags .el-tag:deep(.el-icon-close):hover {background-color: #909399;}
+</style>
diff --git a/src/views/vab/tableselect.vue b/src/views/vab/tableselect.vue
index 90e0b1c8..882f2d4f 100644
--- a/src/views/vab/tableselect.vue
+++ b/src/views/vab/tableselect.vue
@@ -10,33 +10,26 @@
 <template>
 	<el-main>
 		<el-card shadow="never">
-			<el-select ref="selectDom" v-model="value" value-key="value" placeholder="请选择" :loading="loading" multiple clearable  @visible-change="visibleChange($event)">
-				<div class="select-dropdown">
-					<div class="select-dropdown-option">
-						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
-					</div>
-					<div class="page">
-						<el-pagination small background layout="pager" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
-					</div>
-				</div>
-			</el-select>
+			<sc-table-select v-model="value" style="width: 400px;">
+
+			</sc-table-select>
+			<p>{{value}}</p>
 		</el-card>
-		<p>value:{{value}}</p>
-		<p>currentPage:{{currentPage}}</p>
 	</el-main>
 </template>
 
 <script>
+
+	import scTableSelect from '@/components/scTableSelect';
+
 	export default {
 		name: 'tableselect',
+		components: {
+			scTableSelect
+		},
 		data() {
 			return {
-				value: null,
-				loading: false,
-				pageSize: 20,
-				total: 0,
-				currentPage: 1,
-				options: [],
+				value: null
 			}
 		},
 		computed: {
@@ -46,37 +39,10 @@
 
 		},
 		methods: {
-			//获取数据
-			async getData(){
-				this.loading = true;
-				var reqData = {
-					page: this.currentPage
-				}
-				var res = await this.$API.user.list.get(reqData);
-				this.options = res.data;
-				this.total = res.count;
-				this.loading = false;
-			},
-			//选项打开或关闭时
-			visibleChange(isopen){
-				if(isopen){
-					this.getData()
-				}
-			},
-			//分页点击
-			reload(){
-				this.getData();
-			},
-			remoteMethod(query) {
-				if (query !== '') {
-					this.getData()
-				}
-			}
+
 		}
 	}
 </script>
 
 <style scoped>
-	.select-dropdown-option {max-height:190px;overflow: auto;}
-	.page {border-top: 1px solid #eee;padding: 6px 1px 0 1px;}
 </style>