3.8.4:优化表格上右侧工具条(搜索按钮显隐&右侧样式凸出)

pull/2/head
YunaiV 2022-11-13 10:14:49 +08:00
parent 0e903df380
commit 78f7e8a952
1 changed files with 26 additions and 9 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="top-right-btn"> <div class="top-right-btn" :style="style">
<el-row> <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-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="刷新" placement="top"> <el-tooltip class="item" effect="dark" content="刷新" placement="top">
@ -42,6 +42,23 @@ export default {
columns: { columns: {
type: Array, 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() { created() {
// //
@ -75,13 +92,13 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-transfer__button) { ::v-deep .el-transfer__button {
border-radius: 50%; border-radius: 50%;
padding: 12px; padding: 12px;
display: block; display: block;
margin-left: 0; margin-left: 0px;
} }
:deep(.el-transfer__button:first-child) { ::v-deep .el-transfer__button:first-child {
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>