作者 RuoYi

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

@@ -37,14 +37,24 @@ @@ -37,14 +37,24 @@
37 v-hasPermi="['system:dept:add']" 37 v-hasPermi="['system:dept:add']"
38 >新增</el-button> 38 >新增</el-button>
39 </el-col> 39 </el-col>
  40 + <el-col :span="1.5">
  41 + <el-button
  42 + type="info"
  43 + plain
  44 + icon="el-icon-sort"
  45 + size="mini"
  46 + @click="toggleExpandAll"
  47 + >展开/折叠</el-button>
  48 + </el-col>
40 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> 49 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
41 </el-row> 50 </el-row>
42 51
43 <el-table 52 <el-table
  53 + v-if="refreshTable"
44 v-loading="loading" 54 v-loading="loading"
45 :data="deptList" 55 :data="deptList"
46 row-key="deptId" 56 row-key="deptId"
47 - default-expand-all 57 + :default-expand-all="isExpandAll"
48 :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 58 :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
49 > 59 >
50 <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column> 60 <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
@@ -164,6 +174,12 @@ export default { @@ -164,6 +174,12 @@ export default {
164 title: "", 174 title: "",
165 // 是否显示弹出层 175 // 是否显示弹出层
166 open: false, 176 open: false,
  177 + // 是否展开,默认全部展开
  178 + isExpandAll: true,
  179 + // 重新渲染表格状态
  180 + refreshTable: true,
  181 + // 是否展开
  182 + expand: false,
167 // 状态数据字典 183 // 状态数据字典
168 statusOptions: [], 184 statusOptions: [],
169 // 查询参数 185 // 查询参数
@@ -267,6 +283,14 @@ export default { @@ -267,6 +283,14 @@ export default {
267 this.deptOptions = this.handleTree(response.data, "deptId"); 283 this.deptOptions = this.handleTree(response.data, "deptId");
268 }); 284 });
269 }, 285 },
  286 + /** 展开/折叠操作 */
  287 + toggleExpandAll() {
  288 + this.refreshTable = false;
  289 + this.isExpandAll = !this.isExpandAll;
  290 + this.$nextTick(() => {
  291 + this.refreshTable = true;
  292 + });
  293 + },
270 /** 修改按钮操作 */ 294 /** 修改按钮操作 */
271 handleUpdate(row) { 295 handleUpdate(row) {
272 this.reset(); 296 this.reset();
@@ -37,13 +37,24 @@ @@ -37,13 +37,24 @@
37 v-hasPermi="['system:menu:add']" 37 v-hasPermi="['system:menu:add']"
38 >新增</el-button> 38 >新增</el-button>
39 </el-col> 39 </el-col>
  40 + <el-col :span="1.5">
  41 + <el-button
  42 + type="info"
  43 + plain
  44 + icon="el-icon-sort"
  45 + size="mini"
  46 + @click="toggleExpandAll"
  47 + >展开/折叠</el-button>
  48 + </el-col>
40 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> 49 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
41 </el-row> 50 </el-row>
42 51
43 <el-table 52 <el-table
  53 + v-if="refreshTable"
44 v-loading="loading" 54 v-loading="loading"
45 :data="menuList" 55 :data="menuList"
46 row-key="menuId" 56 row-key="menuId"
  57 + :default-expand-all="isExpandAll"
47 :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 58 :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
48 > 59 >
49 <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> 60 <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
@@ -275,6 +286,10 @@ export default { @@ -275,6 +286,10 @@ export default {
275 title: "", 286 title: "",
276 // 是否显示弹出层 287 // 是否显示弹出层
277 open: false, 288 open: false,
  289 + // 是否展开,默认全部折叠
  290 + isExpandAll: false,
  291 + // 重新渲染表格状态
  292 + refreshTable: true,
278 // 显示状态数据字典 293 // 显示状态数据字典
279 visibleOptions: [], 294 visibleOptions: [],
280 // 菜单状态数据字典 295 // 菜单状态数据字典
@@ -384,6 +399,14 @@ export default { @@ -384,6 +399,14 @@ export default {
384 this.open = true; 399 this.open = true;
385 this.title = "添加菜单"; 400 this.title = "添加菜单";
386 }, 401 },
  402 + /** 展开/折叠操作 */
  403 + toggleExpandAll() {
  404 + this.refreshTable = false;
  405 + this.isExpandAll = !this.isExpandAll;
  406 + this.$nextTick(() => {
  407 + this.refreshTable = true;
  408 + });
  409 + },
387 /** 修改按钮操作 */ 410 /** 修改按钮操作 */
388 handleUpdate(row) { 411 handleUpdate(row) {
389 this.reset(); 412 this.reset();