From 2e99c68ed071171dba9f048363fd873ed268d22e Mon Sep 17 00:00:00 2001 From: 若依 <yzz_ivy@163.com> Date: 星期一, 10 四月 2023 17:09:43 +0800 Subject: [PATCH] !695 下拉图标选择组件优化:1.已选择图标高亮回显 2.滚动条采用el-scrollbar Merge pull request !695 from 绿色心情/icon-select --- ruoyi-ui/src/components/RightToolbar/index.vue | 32 ++++++++++++++++++++++++++++---- 1 files changed, 28 insertions(+), 4 deletions(-) diff --git a/ruoyi-ui/src/components/RightToolbar/index.vue b/ruoyi-ui/src/components/RightToolbar/index.vue index 9bf9722..776fcee 100644 --- a/ruoyi-ui/src/components/RightToolbar/index.vue +++ b/ruoyi-ui/src/components/RightToolbar/index.vue @@ -1,7 +1,7 @@ <template> - <div class="top-right-btn"> + <div class="top-right-btn" :style="style"> <el-row> - <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"> + <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"> <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" /> </el-tooltip> <el-tooltip class="item" effect="dark" content="刷新" placement="top"> @@ -42,8 +42,32 @@ columns: { type: Array, }, + search: { + type: Boolean, + default: true, + }, + gutter: { + type: Number, + default: 10, + }, }, - + computed: { + style() { + const ret = {}; + if (this.gutter) { + ret.marginRight = `${this.gutter / 2}px`; + } + return ret; + } + }, + created() { + // 显隐列初始默认隐藏列 + for (let item in this.columns) { + if (this.columns[item].visible === false) { + this.value.push(parseInt(item)); + } + } + }, methods: { // 搜索 toggleSearch() { @@ -55,7 +79,7 @@ }, // 右侧列表元素变化 dataChange(data) { - for (var item in this.columns) { + for (let item in this.columns) { const key = this.columns[item].key; this.columns[item].visible = !data.includes(key); } -- Gitblit v1.9.2