From ac680789d9e47d8a6508949146a18c56e1f112d0 Mon Sep 17 00:00:00 2001
From: shj <1790240199@qq.com>
Date: 星期一, 04 七月 2022 09:14:12 +0800
Subject: [PATCH] 目标

---
 src/components/DailogSearch/DailogSearch.vue |   15 +++++++++++++--
 1 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/DailogSearch/DailogSearch.vue b/src/components/DailogSearch/DailogSearch.vue
index 1ab9ca2..239a164 100644
--- a/src/components/DailogSearch/DailogSearch.vue
+++ b/src/components/DailogSearch/DailogSearch.vue
@@ -1,7 +1,7 @@
 <template>
 	<el-dialog v-model="dialogVisible" title="选择安全目标指标" width="50%" draggable>
 		<el-row>
-			<el-col :span="20">
+			<el-col :span="18">
 		<el-form ref="ruleFormRef" :model="ruleForm" status-icon>
 			<el-row>
 				<el-col :span="6">
@@ -43,7 +43,11 @@
 			@current-change="handleCurrentChange"
 		/>
 		</el-col>
-		<el-col :span="4"></el-col>
+		<el-col :span="6">
+			<el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)">
+					{{ tag }}
+				</el-tag>
+		</el-col>
 		</el-row>
 		<template #footer>
 			<span class="dialog-footer">
@@ -97,6 +101,11 @@
 		const handleCurrentChange = (val: number) => {
 			console.log(`current page: ${val}`);
 		};
+		// 右方点击添加后显示标签
+		const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']);
+		const handleClose = (tag: string) => {
+			dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+		};
 		return {
 			dialogVisible,
 			openDailog,
@@ -105,6 +114,8 @@
 			pageSize4,
 			handleSizeChange,
 			handleCurrentChange,
+			dynamicTags,
+			handleClose,
 			Delete,
 		};
 	},

--
Gitblit v1.9.2