列配置
This commit is contained in:
parent
a9eeb8b855
commit
0b9b2aa39f
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_701_3265)">
|
||||
<path d="M2 17L2 1" stroke="#595959" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M16 17L16 1" stroke="#595959" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M9 1L9 17" stroke="#595959" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="2" cy="13" r="2" fill="#595959"/>
|
||||
<circle cx="16" cy="13" r="2" fill="#595959"/>
|
||||
<circle cx="2" cy="2" r="2" transform="matrix(1 0 0 -1 7 7)" fill="#595959"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_701_3265">
|
||||
<rect width="18" height="18" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 663 B |
Binary file not shown.
|
After Width: | Height: | Size: 396 B |
|
|
@ -0,0 +1,210 @@
|
|||
<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 size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
|
||||
</el-tooltip> -->
|
||||
<!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
||||
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
|
||||
</el-tooltip> -->
|
||||
<!-- <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
|
||||
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
|
||||
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
|
||||
<el-button size="mini" circle icon="el-icon-menu" />
|
||||
<el-dropdown-menu slot="dropdown" style="max-height: 880px; overflow-y: auto;">
|
||||
<template>
|
||||
<el-dropdown-item v-for="(item, index) in columns" :key="index">
|
||||
<el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-tooltip> -->
|
||||
<el-tooltip class="item" effect="dark" content="列表全屏" placement="top" style="margin-left: 10px">
|
||||
<el-button
|
||||
size="mini"
|
||||
circle
|
||||
icon="el-icon-full-screen"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body>
|
||||
<el-transfer
|
||||
:titles="['显示', '隐藏']"
|
||||
v-model="value"
|
||||
:data="columns"
|
||||
@change="dataChange"
|
||||
></el-transfer>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "RightToolbar",
|
||||
data() {
|
||||
return {
|
||||
// 显隐数据
|
||||
value: [],
|
||||
// 弹出层标题
|
||||
title: "显示/隐藏",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
/* 是否显示检索条件 */
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/* 显隐列信息 */
|
||||
columns: {
|
||||
type: Array,
|
||||
},
|
||||
/* 是否显示检索图标 */
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/* 显隐列类型（transfer穿梭框、checkbox复选框） */
|
||||
showColumnsType: {
|
||||
type: String,
|
||||
default: "checkbox",
|
||||
},
|
||||
/* 右外边距 */
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const ret = {};
|
||||
if (this.gutter) {
|
||||
ret.marginRight = `${this.gutter / 2}px`;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.showColumnsType == 'transfer') {
|
||||
// 显隐列初始默认隐藏列
|
||||
for (let item in this.columns) {
|
||||
if (this.columns[item].visible === false) {
|
||||
this.value.push(parseInt(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
toggleSearch() {
|
||||
this.$emit("update:showSearch", !this.showSearch);
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
this.$emit("queryTable");
|
||||
},
|
||||
// 右侧列表元素变化
|
||||
toggleFullscreen() {
|
||||
// 1️⃣ 找表格 DOM
|
||||
let tableEl = document.querySelector('.el-table')
|
||||
|
||||
if (!tableEl) {
|
||||
const tables = Array.from(document.querySelectorAll('.el-table'))
|
||||
tableEl = tables.find((t) => t.offsetParent !== null)
|
||||
}
|
||||
|
||||
if (!tableEl) {
|
||||
this.$message.warning('未找到表格区域')
|
||||
return
|
||||
}
|
||||
|
||||
// 2️⃣ 找分页 DOM
|
||||
let pagerEl = document.querySelector('.pagination-container')
|
||||
|
||||
if (!pagerEl) {
|
||||
const pagers = Array.from(document.querySelectorAll('.pagination-container'))
|
||||
pagerEl = pagers.find((p) => p.offsetParent !== null)
|
||||
}
|
||||
|
||||
// 3️⃣ 找最近公共父节点
|
||||
let fullscreenEl = tableEl.parentElement
|
||||
|
||||
if (pagerEl) {
|
||||
while (fullscreenEl && (!fullscreenEl.contains(tableEl) || !fullscreenEl.contains(pagerEl))) {
|
||||
fullscreenEl = fullscreenEl.parentElement
|
||||
}
|
||||
}
|
||||
|
||||
if (!fullscreenEl) fullscreenEl = tableEl
|
||||
|
||||
const doc = document
|
||||
|
||||
// 🔐 只保存一次原样式
|
||||
if (!fullscreenEl.__fsBound) {
|
||||
fullscreenEl.__oldBg = fullscreenEl.style.background
|
||||
fullscreenEl.__oldMinHeight = fullscreenEl.style.minHeight
|
||||
fullscreenEl.__fsBound = true
|
||||
}
|
||||
|
||||
// ===== 进入全屏 =====
|
||||
if (!doc.fullscreenElement) {
|
||||
fullscreenEl.style.background = '#fff'
|
||||
fullscreenEl.style.minHeight = '100vh'
|
||||
|
||||
const onFsChange = () => {
|
||||
// 👉 退出全屏（ESC / API）
|
||||
if (!document.fullscreenElement) {
|
||||
// 1️⃣ 还原样式
|
||||
fullscreenEl.style.background = fullscreenEl.__oldBg || ''
|
||||
fullscreenEl.style.minHeight = fullscreenEl.__oldMinHeight || ''
|
||||
|
||||
// 2️⃣ 强制表格重新布局（不依赖 ref）
|
||||
this.$nextTick(() => {
|
||||
const tableVm = tableEl.__vue__ || document.querySelector('.el-table')?.__vue__
|
||||
|
||||
tableVm?.doLayout()
|
||||
})
|
||||
|
||||
document.removeEventListener('fullscreenchange', onFsChange)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('fullscreenchange', onFsChange)
|
||||
|
||||
fullscreenEl.requestFullscreen?.()
|
||||
} else {
|
||||
// ===== 主动退出全屏（点按钮）=====
|
||||
doc.exitFullscreen?.()
|
||||
}
|
||||
},
|
||||
dataChange(data) {
|
||||
for (let item in this.columns) {
|
||||
const key = this.columns[item].key;
|
||||
this.columns[item].visible = !data.includes(key);
|
||||
}
|
||||
},
|
||||
// 打开显隐列dialog
|
||||
showColumn() {
|
||||
this.open = true;
|
||||
},
|
||||
// 勾选
|
||||
checkboxChange(event, label) {
|
||||
this.columns.filter(item => item.label == label)[0].visible = event;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-transfer__button {
|
||||
border-radius: 50%;
|
||||
padding: 12px;
|
||||
display: block;
|
||||
margin-left: 0px;
|
||||
}
|
||||
::v-deep .el-transfer__button:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,170 +1,180 @@
|
|||
<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 size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
|
||||
</el-tooltip> -->
|
||||
<!-- <el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
||||
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
|
||||
</el-tooltip> -->
|
||||
<!-- <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
|
||||
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
|
||||
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
|
||||
<el-button size="mini" circle icon="el-icon-menu" />
|
||||
<el-dropdown-menu slot="dropdown" style="max-height: 880px; overflow-y: auto;">
|
||||
<template>
|
||||
<el-dropdown-item v-for="(item, index) in columns" :key="index">
|
||||
<el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-tooltip> -->
|
||||
<el-tooltip class="item" effect="dark" content="列表全屏" placement="top" style="margin-left: 10px">
|
||||
<el-button
|
||||
size="mini"
|
||||
circle
|
||||
icon="el-icon-full-screen"
|
||||
@click="toggleFullscreen"
|
||||
/>
|
||||
<el-tooltip class="item" effect="dark" content="列配置" placement="top" v-if="columns">
|
||||
<el-popover placement="bottom-end" width="260" trigger="click" v-model="open">
|
||||
<div class="column-panel">
|
||||
<!-- 搜索 -->
|
||||
<el-input v-model="keyword" size="mini" placeholder="搜索字段" clearable class="search-input" />
|
||||
|
||||
<!-- 操作区 -->
|
||||
<div class="panel-actions">
|
||||
<el-checkbox :value="checkAll" :indeterminate="isIndeterminate" @change="onCheckAll"> 全选 </el-checkbox>
|
||||
<el-link type="primary" :underline="false" @click="resetColumns"> 恢复默认 </el-link>
|
||||
</div>
|
||||
|
||||
<!-- 可拖拽列表 -->
|
||||
<div class="list-wrapper">
|
||||
<draggable
|
||||
v-model="innerColumns"
|
||||
:options="{ handle: '.drag-handle', animation: 150 }"
|
||||
ghost-class="ghost"
|
||||
>
|
||||
<transition-group name="flip-list" tag="div">
|
||||
<div v-for="item in innerColumns" :key="item.key" class="column-item" v-show="matchKeyword(item)">
|
||||
<el-checkbox v-model="item.visible">
|
||||
{{ item.label }}
|
||||
</el-checkbox>
|
||||
<span class="drag-handle">
|
||||
<img src="@/assets/images/icon-drag.png" style="width: 10px; height: 15px" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="panel-footer">
|
||||
<el-button size="mini" type="primary" style="width: 100%" @click="applyChange"> 确 定 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 触发按钮 -->
|
||||
<svg-icon slot="reference" icon-class="menu" class="menu-icon" />
|
||||
</el-popover>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip class="item" effect="dark" content="列表全屏" placement="top" style="margin: 5px 0 0 10px">
|
||||
<svg-icon icon-class="full-screen" @click="toggleFullscreen" />
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body>
|
||||
<el-transfer
|
||||
:titles="['显示', '隐藏']"
|
||||
v-model="value"
|
||||
:data="columns"
|
||||
@change="dataChange"
|
||||
></el-transfer>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: "RightToolbar",
|
||||
data() {
|
||||
return {
|
||||
// 显隐数据
|
||||
value: [],
|
||||
// 弹出层标题
|
||||
title: "显示/隐藏",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
};
|
||||
},
|
||||
name: 'RightToolbarElementDraggable',
|
||||
components: { draggable },
|
||||
props: {
|
||||
/* 是否显示检索条件 */
|
||||
showSearch: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/* 显隐列信息 */
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
/* 是否显示检索图标 */
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/* 显隐列类型（transfer穿梭框、checkbox复选框） */
|
||||
showColumnsType: {
|
||||
type: String,
|
||||
default: "checkbox",
|
||||
},
|
||||
/* 右外边距 */
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
keyword: '',
|
||||
innerColumns: [],
|
||||
backupColumns: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
const ret = {};
|
||||
if (this.gutter) {
|
||||
ret.marginRight = `${this.gutter / 2}px`;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
const ret = {}
|
||||
if (this.gutter) ret.marginRight = `${this.gutter / 2}px`
|
||||
return ret
|
||||
},
|
||||
checkAll() {
|
||||
return this.innerColumns.length ? this.innerColumns.every((c) => c.visible) : false
|
||||
},
|
||||
isIndeterminate() {
|
||||
const visCount = this.innerColumns.filter((c) => c.visible).length
|
||||
return visCount > 0 && visCount < this.innerColumns.length
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.showColumnsType == 'transfer') {
|
||||
// 显隐列初始默认隐藏列
|
||||
for (let item in this.columns) {
|
||||
if (this.columns[item].visible === false) {
|
||||
this.value.push(parseInt(item));
|
||||
}
|
||||
}
|
||||
}
|
||||
watch: {
|
||||
columns: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(val) {
|
||||
// 复用你原来 transfer 逻辑的“本地副本”思想
|
||||
this.innerColumns = val.map((c) => ({ ...c }))
|
||||
this.backupColumns = val.map((c) => ({ ...c }))
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 搜索
|
||||
toggleSearch() {
|
||||
this.$emit("update:showSearch", !this.showSearch);
|
||||
matchKeyword(item) {
|
||||
if (!this.keyword) return true
|
||||
const k = this.keyword.toLowerCase()
|
||||
return (item.label || '').toLowerCase().includes(k)
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
this.$emit("queryTable");
|
||||
onCheckAll(val) {
|
||||
this.innerColumns.forEach((c) => (c.visible = val))
|
||||
},
|
||||
// 右侧列表元素变化
|
||||
toggleFullscreen() {
|
||||
// 1️⃣ 找表格 DOM
|
||||
let tableEl = document.querySelector('.el-table')
|
||||
resetColumns() {
|
||||
// 恢复为“初始 columns”快照
|
||||
this.innerColumns = this.backupColumns.map((c) => ({ ...c }))
|
||||
},
|
||||
applyChange() {
|
||||
// === 关键：完全复用你原来 dataChange 的思想 ===
|
||||
// 把 innerColumns 的 visible / 顺序，同步回 this.columns
|
||||
this.innerColumns.forEach((col, idx) => {
|
||||
const target = this.columns.find((c) => c.key === col.key)
|
||||
if (target) {
|
||||
target.visible = col.visible
|
||||
}
|
||||
})
|
||||
|
||||
// 同步顺序：直接用 splice 重排原数组（保证引用不变）
|
||||
const newOrder = this.innerColumns.map((c) => c.key)
|
||||
const ordered = newOrder.map((k) => this.columns.find((c) => c.key === k)).filter(Boolean)
|
||||
|
||||
this.columns.splice(0, this.columns.length, ...ordered)
|
||||
|
||||
this.open = false
|
||||
},
|
||||
toggleFullscreen() {
|
||||
let tableEl = document.querySelector('.el-table')
|
||||
if (!tableEl) {
|
||||
const tables = Array.from(document.querySelectorAll('.el-table'))
|
||||
tableEl = tables.find((t) => t.offsetParent !== null)
|
||||
}
|
||||
|
||||
if (!tableEl) {
|
||||
this.$message.warning('未找到表格区域')
|
||||
return
|
||||
}
|
||||
|
||||
// 2️⃣ 找分页 DOM
|
||||
let pagerEl = document.querySelector('.pagination-container')
|
||||
|
||||
if (!pagerEl) {
|
||||
const pagers = Array.from(document.querySelectorAll('.pagination-container'))
|
||||
pagerEl = pagers.find((p) => p.offsetParent !== null)
|
||||
}
|
||||
|
||||
// 3️⃣ 找最近公共父节点
|
||||
let fullscreenEl = tableEl.parentElement
|
||||
|
||||
if (pagerEl) {
|
||||
while (fullscreenEl && (!fullscreenEl.contains(tableEl) || !fullscreenEl.contains(pagerEl))) {
|
||||
fullscreenEl = fullscreenEl.parentElement
|
||||
}
|
||||
}
|
||||
|
||||
if (!fullscreenEl) fullscreenEl = tableEl
|
||||
|
||||
const doc = document
|
||||
|
||||
// 🔐 只保存一次原样式
|
||||
if (!fullscreenEl.__fsBound) {
|
||||
fullscreenEl.__oldBg = fullscreenEl.style.background
|
||||
fullscreenEl.__oldMinHeight = fullscreenEl.style.minHeight
|
||||
fullscreenEl.__fsBound = true
|
||||
}
|
||||
|
||||
// ===== 进入全屏 =====
|
||||
if (!doc.fullscreenElement) {
|
||||
fullscreenEl.style.background = '#fff'
|
||||
fullscreenEl.style.minHeight = '100vh'
|
||||
|
||||
const onFsChange = () => {
|
||||
// 👉 退出全屏（ESC / API）
|
||||
if (!document.fullscreenElement) {
|
||||
// 1️⃣ 还原样式
|
||||
fullscreenEl.style.background = fullscreenEl.__oldBg || ''
|
||||
fullscreenEl.style.minHeight = fullscreenEl.__oldMinHeight || ''
|
||||
|
||||
// 2️⃣ 强制表格重新布局（不依赖 ref）
|
||||
this.$nextTick(() => {
|
||||
const tableVm = tableEl.__vue__ || document.querySelector('.el-table')?.__vue__
|
||||
|
||||
tableVm?.doLayout()
|
||||
})
|
||||
|
||||
|
|
@ -173,38 +183,68 @@ export default {
|
|||
}
|
||||
|
||||
document.addEventListener('fullscreenchange', onFsChange)
|
||||
|
||||
fullscreenEl.requestFullscreen?.()
|
||||
fullscreenEl.requestFullscreen && fullscreenEl.requestFullscreen()
|
||||
} else {
|
||||
// ===== 主动退出全屏（点按钮）=====
|
||||
doc.exitFullscreen?.()
|
||||
doc.exitFullscreen && doc.exitFullscreen()
|
||||
}
|
||||
},
|
||||
dataChange(data) {
|
||||
for (let item in this.columns) {
|
||||
const key = this.columns[item].key;
|
||||
this.columns[item].visible = !data.includes(key);
|
||||
}
|
||||
},
|
||||
// 打开显隐列dialog
|
||||
showColumn() {
|
||||
this.open = true;
|
||||
},
|
||||
// 勾选
|
||||
checkboxChange(event, label) {
|
||||
this.columns.filter(item => item.label == label)[0].visible = event;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-transfer__button {
|
||||
border-radius: 50%;
|
||||
padding: 12px;
|
||||
display: block;
|
||||
margin-left: 0px;
|
||||
}
|
||||
::v-deep .el-transfer__button:first-child {
|
||||
margin-bottom: 10px;
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-right-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.column-panel {
|
||||
padding: 8px;
|
||||
max-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: grab;
|
||||
margin-right: 8px;
|
||||
color: #999;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -446,7 +446,8 @@ export default {
|
|||
},
|
||||
created() {
|
||||
this.getUser()
|
||||
this.menuList = this.sidebarRouters.filter((route) => !route.hidden)
|
||||
this.menuList = this.sidebarRouters.filter((route) => !route.hidden && route.path !== '/')
|
||||
console.log('🚀 ~ this.menuList:', this.menuList)
|
||||
},
|
||||
methods: {
|
||||
goWarningDetail(item) {
|
||||
|
|
@ -629,10 +630,11 @@ export default {
|
|||
height: 50px;
|
||||
line-height: 50px;
|
||||
flex: 1;
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin: 0 20px;
|
||||
justify-content: center;
|
||||
// margin: 0 20px;
|
||||
.menu-item {
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
Loading…
Reference in New Issue