若依-菜单管理

Mar 13, 2022
#若依

菜单管理 参考文献 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>
Back