From 1595cb282aab5399862fac6406b5de550863e3b6 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 03 四月 2023 00:05:09 +0800 Subject: [PATCH] update 调整代码格式 --- src/components/RightToolbar/index.vue | 100 +++++++++++++++++++++++++------------------------- 1 files changed, 50 insertions(+), 50 deletions(-) diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue index fd94360..20226d8 100644 --- a/src/components/RightToolbar/index.vue +++ b/src/components/RightToolbar/index.vue @@ -1,23 +1,42 @@ +<template> + <div class="top-right-btn" :style="style"> + <el-row> + <el-tooltip class="item" effect="dark" :content="showSearch ? '闅愯棌鎼滅储' : '鏄剧ず鎼滅储'" placement="top" v-if="search"> + <el-button circle icon="Search" @click="toggleSearch()" /> + </el-tooltip> + <el-tooltip class="item" effect="dark" content="鍒锋柊" placement="top"> + <el-button circle icon="Refresh" @click="refresh()" /> + </el-tooltip> + <el-tooltip class="item" effect="dark" content="鏄鹃殣鍒�" placement="top" v-if="columns"> + <el-button circle icon="Menu" @click="showColumn()" /> + </el-tooltip> + </el-row> + <el-dialog :title="title" v-model="open" append-to-body> + <el-transfer :titles="['鏄剧ず', '闅愯棌']" v-model="value" :data="columns" @change="dataChange"></el-transfer> + </el-dialog> + </div> +</template> + <script setup lang="ts"> import { TransferKey } from "element-plus"; import { PropType } from "vue"; const props = defineProps({ - showSearch: { - type: Boolean, - default: true, - }, - columns: { - type: Array as PropType<FieldOption[]>, - }, - search: { - type: Boolean, - default: true, - }, - gutter: { - type: Number, - default: 10, - }, + showSearch: { + type: Boolean, + default: true, + }, + columns: { + type: Array as PropType<FieldOption[]>, + }, + search: { + type: Boolean, + default: true, + }, + gutter: { + type: Number, + default: 10, + }, }) const emits = defineEmits(['update:showSearch', 'queryTable']); @@ -30,63 +49,44 @@ const open = ref(false); const style = computed(() => { - const ret: any = {}; - if (props.gutter) { - ret.marginRight = `${props.gutter / 2}px`; - } - return ret; + const ret: any = {}; + if (props.gutter) { + ret.marginRight = `${props.gutter / 2}px`; + } + return ret; }); // 鎼滅储 function toggleSearch() { - emits("update:showSearch", !props.showSearch); + emits("update:showSearch", !props.showSearch); } // 鍒锋柊 function refresh() { - emits("queryTable"); + emits("queryTable"); } // 鍙充晶鍒楄〃鍏冪礌鍙樺寲 function dataChange(data: TransferKey[]) { - props.columns?.forEach((item) => { - item.visible = !data.includes(item.key); - }) + props.columns?.forEach((item) => { + item.visible = !data.includes(item.key); + }) } // 鎵撳紑鏄鹃殣鍒梔ialog const showColumn = () => { - open.value = true; + open.value = true; } // 鏄鹃殣鍒楀垵濮嬮粯璁ら殣钘忓垪 onMounted(() => { - props.columns?.forEach((item) => { - if (!item.visible) { - value.value.push(item.key); - } - }) + props.columns?.forEach((item) => { + if (!item.visible) { + value.value.push(item.key); + } + }) }) </script> - -<template> - <div class="top-right-btn" :style="style"> - <el-row> - <el-tooltip class="item" effect="dark" :content="showSearch ? '闅愯棌鎼滅储' : '鏄剧ず鎼滅储'" placement="top" v-if="search"> - <el-button circle icon="Search" @click="toggleSearch()" /> - </el-tooltip> - <el-tooltip class="item" effect="dark" content="鍒锋柊" placement="top"> - <el-button circle icon="Refresh" @click="refresh()" /> - </el-tooltip> - <el-tooltip class="item" effect="dark" content="鏄鹃殣鍒�" placement="top" v-if="columns"> - <el-button circle icon="Menu" @click="showColumn()" /> - </el-tooltip> - </el-row> - <el-dialog :title="title" v-model="open" append-to-body> - <el-transfer :titles="['鏄剧ず', '闅愯棌']" v-model="value" :data="columns" @change="dataChange"></el-transfer> - </el-dialog> - </div> -</template> <style lang="scss" scoped> :deep(.el-transfer__button) { -- Gitblit v1.9.3