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