- <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>
- const props = defineProps({
- showSearch: {
- type: Boolean,
- default: true,
- },
- columns: {
- type: Array,
- },
- search: {
- type: Boolean,
- default: true,
- },
- gutter: {
- type: Number,
- default: 10,
- },
- });
-
- const emits = defineEmits(['update:showSearch', 'queryTable']);
-
- // 显隐数据
- const value = ref([]);
- // 弹出层标题
- const title = ref('显示/隐藏');
- // 是否显示弹出层
- const open = ref(false);
-
- const style = computed(() => {
- const ret = {};
- if (props.gutter) {
- ret.marginRight = `${props.gutter / 2}px`;
- }
- return ret;
- });
-
- // 搜索
- function toggleSearch() {
- emits('update:showSearch', !props.showSearch);
- }
-
- // 刷新
- function refresh() {
- emits('queryTable');
- }
-
- // 右侧列表元素变化
- function dataChange(data) {
- for (let item in props.columns) {
- const key = props.columns[item].key;
- props.columns[item].visible = !data.includes(key);
- }
- }
-
- // 打开显隐列dialog
- function showColumn() {
- open.value = true;
- }
-
- // 显隐列初始默认隐藏列
- for (let item in props.columns) {
- if (props.columns[item].visible === false) {
- value.value.push(parseInt(item));
- }
- }
- </script>
-
- <style lang="scss" scoped>
- :deep(.el-transfer__button) {
- border-radius: 50%;
- display: block;
- margin-left: 0px;
- }
- :deep(.el-transfer__button:first-child) {
- margin-bottom: 10px;
- }
- :deep(.el-button) {
- background: #004770;
- border-color: #004770;
- }
-
- .my-el-transfer {
- text-align: center;
- }
- </style>