ElementUI官网的table组件有个tree模式，就是类似于树模式的table表格样式，这个功能用于菜单展示挺好看也挺好用。
直接上代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277<template>
<div class="app-container">
<!-- 按钮 -->
<el-row>
<el-button id="btn-create" :size="btnBaseAttrs.size" :plain="btnBaseAttrs.plain" :round="btnBaseAttrs.round" :disabled="btnDisabled" @click="openAddMenu">
<svg-icon icon-class="i_add" /> 新增
</el-button>
<el-button id="btn-tip" type="success" class="btn-margin" :plain="btnBaseAttrs.plain" :round="btnBaseAttrs.round" :size="btnBaseAttrs.size" :disabled="btnDisabled" @click="openTip()">
<svg-icon icon-class="i_sm" /> 字段说明
</el-button>
<!-- 是否展开 -->
<menu-expand :expand="expandStatus" @menu-expand-status="menuExpandStatus" />
</el-row>
<!--Table表格-->
<div id="data-container" class="table-sty">
<el-table
ref="multipleSourceTableRef"
:data="tableData"
:row-key="tableAttrs.rowKey"
:size="tableAttrs.size"
:fit="tableAttrs.fit"
:show-header="tableAttrs.showHeader"
:highlight-current-row="tableAttrs.hcr"
:border="tableAttrs.border"
style="width: 100%;margin-bottom: 20px;"
:default-expand-all="tableAttrs.expand"
:default-sort="{ prop: 'id', order: 'asc' }"
:empty-text="tableAttrs.emptyText"
:header-cell-style="setTableHeaderStyle"
:row-style="setTableRowStyle"
:tree-props="tableAttrs.treeProps"
:expand-row-keys="tableOneKeys"
>
<el-table-column fixed="left" prop="id" label="菜单ID" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="name" label="RTX名称" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="title" label="中文名称" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="path" label="请求地址" width="180" :header-align="tableRowAttrs.headerAlign" align="left" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="icon" label="菜单图标" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="level" label="级别" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column label="上级菜单信息" :align="tableRowAttrs.align">
<el-table-column prop="pid" label="上级菜单ID" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="pname" label="上级菜单RTX" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="ptitle" label="上级菜单名称" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
</el-table-column>
<el-table-column label="开发者配置信息" :align="tableRowAttrs.align">
<el-table-column prop="component" label="组件" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="redirect" label="重定向" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="hidden" label="Hidden属性" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="noCache" label="noCache属性" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="affix" label="Affix属性" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column prop="breadcrumb" label="Breadcrumb属性" width="180" :align="tableRowAttrs.align" sortable :show-overflow-tooltip="tableRowAttrs.sot" />
</el-table-column>
<el-table-column label="创建时间" :header-align="tableRowAttrs.headerAlign" :align="tableRowAttrs.align" width="240" sortable>
<template slot-scope="scope">
<i class="el-icon-time" />
<span style="margin-left: 20px">{{ scope.row.create_time }}</span>
</template>
</el-table-column>
<el-table-column prop="create_rtx" label="创建者RTX" width="180" :align="tableRowAttrs.align" :show-overflow-tooltip="tableRowAttrs.sot" />
<el-table-column fixed="right" label="操作" :align="tableRowAttrs.align" width="200">
<template slot-scope="scope">
<el-tooltip effect="dark" content="详情" placement="top">
<i class="el-icon-document" @click="rowHandleEdit(scope.$index, scope.row, 'detail')" />
</el-tooltip>
<el-tooltip class="icon-item" effect="dark" content="编辑" placement="top">
<i class="el-icon-edit" @click="rowHandleEdit(scope.$index, scope.row, 'info')" />
</el-tooltip>
</template>
</el-table-column>
<el-table-column fixed="right" label="状态管理" :align="tableRowAttrs.align" width="200">
<template slot-scope="scope">
<menu-status :row="scope.row" />
</template>
</el-table-column>
</el-table>
</div>
<!-- 暂定table、tree 2种显示模式，不做page分页 -->
<!-- 提示说明 -->
<menu-tip :show="tipDialogStatus" @close-tip="closeTip" />
<!-- 新增 -->
<menu-add :show="addDialogStatus" @close-add-menu="closeAddMenu" />
<!-- 详情 -->
<menu-detail :show="detailDialogStatus" :row-md5="oprSelectRtx" @close-detail-menu="closeDetailMenu" />
<!-- 编辑 -->
<menu-set :show="setDialogStatus" :row-md5="oprSelectRtx" @close-set-menu="closeSetMenu" />
</div>
</template>
<script>
import store from '@/store'
import { getMenuList } from '@/api/manage'
import MenuExpand from '@/components/manage/MenuExpand'
import MenuTip from '@/components/manage/MenuTip'
import MenuDetail from '@/components/manage/MenuDetail'
import MenuAdd from '@/components/manage/MenuAdd'
import MenuSet from '@/components/manage/MenuSet'
import MenuStatus from '@/components/manage/MenuStatus'
export default {
name: 'Menu',
emits: [],
components: {
'menu-expand': MenuExpand,
'menu-tip': MenuTip,
'menu-detail': MenuDetail,
'menu-add': MenuAdd,
'menu-set': MenuSet,
'menu-status': MenuStatus
},
props: {},
data() {
return {
btnDisabled: false, // 按钮禁用状态
expandStatus: false, // 是否展开
// button attributes
btnBaseAttrs: {
size: 'medium', // 大小 medium / small / mini / ''
type: 'primary', // 类型 primary / success / warning / danger / info / text
plain: true, // 是否为朴素按钮
round: false, // 是否为圆角按钮
circle: false // 是否为圆形按钮
},
// switch attrs
switchAttrs: { // switch attrs
disabled: false, // 是否禁用
width: 40, // 宽度（像素），默认40
activeText: '展开', // 打开时的文字描述
inactiveText: '关闭', // 关闭时的文字描述
activeValue: true, // 打开时的value
inactiveValue: false, // 打开时的value
activeColor: '#ff4949', // 打开时的背景色
inactiveColor: '#13ce66' // 关闭时的背景色
},
// table attributes
tableAttrs: {
rowKey: 'id',
stripe: true, // 是否为斑马纹 true/false
border: true, // 是否带有纵向边框 true/false
size: 'medium', // 尺寸 medium / small / mini / ''
fit: true, // 列的宽度是否自撑开 true/false
showHeader: true, // 是否显示表头 true/false
hcr: true, // 是否要高亮当前行highlight-current-row true/false
height: 450, // 高度
maxHeight: 450, // 最大高度(属性为Table指定最大高度，此时若表格所需的高度大于最大高度，则会显示一个滚动条。)
expand: false, // default-expand-all 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
treeProps: { children: 'children' }, // treeProps
showSum: true, // 表尾合计
sumText: '统计', // 合计行第一列的文
emptyText: '暂无数据' // 空数据时显示的文本内容
},
// table row: label column-key prop width min-width sortable
tableRowAttrs: {
type: 'selection', // selection多选框 / index索引 / expand可展开的按钮
index: 1, // 如果设置了 type=index，可以通过传递 index 属性来自定义索引
fixed: true, // 列固定，值有left、right，默认为left
resizable: true, // 对应列是否可以通过拖动改变宽度 true/false
align: 'center', // 对齐方式 left / center / right
headerAlign: 'center', // 表头对齐方式，若不设置该项，则使用表格的对齐方式 left / center / right
sot: true // showOverflowTooltip 多余的内容会在hover时以tooltip的形式显示出来
},
tableData: [], // table data
tableOneKeys: [], // 一级菜单的key，格式为[{id: 1}, {id: 2}...]，用于开关闭菜单折叠
tipDialogStatus: false, // tip
oprSelectRtx: '', // 当前选择数据的RTX
deleteConfirm: false, // 删除确认dialog状态
detailDialogStatus: false, // 详情dialog
setDialogStatus: false, // 编辑dialog
addDialogStatus: false // 新增dialog
}
},
computed: {},
watch: {},
created() {
this.getMenuList()
},
mounted() {},
methods: {
getMenuList() { // 请求后台API初始化表格数据
// 初始化选择参数
this.oprSelectRtx = ''
// list列表参数
const data = {
'rtx_id': store.getters.rtx_id
}
return new Promise((resolve, reject) => {
getMenuList(data).then(response => {
const { status_id, data } = response
if (status_id === 100 || status_id === 101) {
this.tableData = data.list
this.tableOneKeys = data.keys
}
resolve(response)
}).catch(error => {
this.loading = false
reject(error)
})
})
},
setTableHeaderStyle() { // table title样式
return {
background: '#eee',
color: '#606266'
}
},
setTableRowStyle({ row, rowIndex }) { // table row样式
if (row && row.level === '1') {
return {
background: '#FFEE99', // 42B984 FFFF00
color: '#000000'
}
}
},
rowHandleEdit(index, row, type) { // table row 编辑详情
if (!row || !type || !row.md5_id) {
return false
}
this.oprSelectRtx = row.md5_id
if (type === 'detail') {
this.detailDialogStatus = true
} else if (type === 'info') {
this.setDialogStatus = true
}
},
closeDetailMenu() { // 关闭菜单详情dg
this.detailDialogStatus = false
},
closeSetMenu(isRefresh) { // 关闭编辑菜单dg
this.setDialogStatus = false
if (isRefresh) {
this.getMenuList()
}
},
openAddMenu() { // 打开新增菜单dg
this.addDialogStatus = true
},
closeAddMenu(isRefresh) { // 关闭新增菜单dg
this.addDialogStatus = false
if (isRefresh) {
this.getMenuList()
}
},
menuExpandStatus(status) { // 打开/关闭table 子菜单
this.expandStatus = status
this.tableOneKeys.map(item => {
return this.$refs.multipleSourceTableRef.toggleRowExpansion(item, status)
})
},
openTip() { // 开启tip
this.tipDialogStatus = true
},
closeTip() { // 关闭tip
this.tipDialogStatus = false
}
}
}
</script>
<style scoped>
.btn-margin {
margin-left: 20px;
}
.table-sty {
margin-top: 25px;
}
.icon-item {
margin-left: 45px;
}
</style>
