若依-菜单管理

菜单管理
参考文献
https://blog.csdn.net/liuzixin_lzx/article/details/113179174
菜单列表显示
1.构造树型结构数据
在utils文件夹下创建ruoyi.js 在里添加并导出下方代码

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 */
export function handleTree(data, id, parentId, children) {
	let config = {
		id: id || 'id',
		parentId: parentId || 'parentId',
		childrenList: children || 'children'
	};

	var childrenListMap = {};
	var nodeIds = {};
	var tree = [];

	for (let d of data) {
		let parentId = d[config.parentId];
		if (childrenListMap[parentId] == null) {
			childrenListMap[parentId] = [];
		}
		nodeIds[d[config.id]] = d;
		childrenListMap[parentId].push(d);
	}

	for (let d of data) {
		let parentId = d[config.parentId];
		if (nodeIds[parentId] == null) {
			tree.push(d);
		}
	}

	for (let t of tree) {
		adaptToChildrenList(t);
	}

	function adaptToChildrenList(o) {
		if (childrenListMap[o[config.id]] !== null) {
			o[config.childrenList] = childrenListMap[o[config.id]];
		}
		if (o[config.childrenList]) {
			for (let c of o[config.childrenList]) {
				adaptToChildrenList(c);
			}
		}
	}

	return tree;
}

2.在main.js中引用

import {handleTree} from "@/utils/ruoyi";

Vue.prototype.handleTree = handleTree

3.在menu中使用

data()
{
	return {
		// 查询参数
		queryParams: {
			menuName: undefined, // 菜单名称
			status: undefined // 菜单状态
		}
	}
}
,
created()
{
	this.getList();
}
,
methods: {
	// 查询菜单列表
	getList()
	{
		this.loading = true;
		// listMenu为请求的列表接口 this.queryParams为搜索需要传入的参数
		listMenu(this.queryParams).then(response => {
			this.menuList = this.handleTree(response.data, "menuId");
			this.loading = false;
		});
	}
}

页面配合elementui的表格一起使用

<!-- isExpandAll默认展开方式 -->
<el-table
    v-if="refreshTable"
    v-loading="loading"
    :data="menuList"
    row-key="menuId"
    :default-expand-all="isExpandAll"
    :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="icon" label="图标" align="center" width="100">
    <template slot-scope="scope">
      <svg-icon :icon-class="scope.row.icon"/>
    </template>
  </el-table-column>
  <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
  <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
  <el-table-column prop="status" label="状态" width="80">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
    </template>
  </el-table-column>
  <el-table-column label="创建时间" align="center" prop="createTime">
    <template slot-scope="scope">
      <span>{{ parseTime(scope.row.createTime) }}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
      >修改
      </el-button>
      <el-button
          size="mini"
          type="text"
          icon="el-icon-plus"
          @click="handleAdd(scope.row)"
      >新增
      </el-button>
      <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
      >删除
      </el-button>
    </template>
  </el-table-column>
</el-table>