菜单&部门新增展开/折叠功能

This commit is contained in:
RuoYi 2021-09-04 12:10:33 +08:00
parent 14c6c796e8
commit 9ae5edaa74
2 changed files with 48 additions and 1 deletions

View File

@ -37,14 +37,24 @@
v-hasPermi="['system:dept:add']" v-hasPermi="['system:dept:add']"
>新增</el-button> >新增</el-button>
</el-col> </el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table <el-table
v-if="refreshTable"
v-loading="loading" v-loading="loading"
:data="deptList" :data="deptList"
row-key="deptId" row-key="deptId"
default-expand-all :default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
> >
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column> <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
@ -164,6 +174,12 @@ export default {
title: "", title: "",
// //
open: false, open: false,
//
isExpandAll: true,
//
refreshTable: true,
//
expand: false,
// //
statusOptions: [], statusOptions: [],
// //
@ -267,6 +283,14 @@ export default {
this.deptOptions = this.handleTree(response.data, "deptId"); this.deptOptions = this.handleTree(response.data, "deptId");
}); });
}, },
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();

View File

@ -37,13 +37,24 @@
v-hasPermi="['system:menu:add']" v-hasPermi="['system:menu:add']"
>新增</el-button> >新增</el-button>
</el-col> </el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table <el-table
v-if="refreshTable"
v-loading="loading" v-loading="loading"
:data="menuList" :data="menuList"
row-key="menuId" row-key="menuId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
> >
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
@ -275,6 +286,10 @@ export default {
title: "", title: "",
// //
open: false, open: false,
//
isExpandAll: false,
//
refreshTable: true,
// //
visibleOptions: [], visibleOptions: [],
// //
@ -384,6 +399,14 @@ export default {
this.open = true; this.open = true;
this.title = "添加菜单"; this.title = "添加菜单";
}, },
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();