使用elementui中的Tree 树形控件做权限管理 el-tree 数据回显问题

最新推荐文章于 2025-06-10 18:27:48 发布

原创

最新推荐文章于 2025-06-10 18:27:48 发布 · 6.4k 阅读

20 ·

CC 4.0 BY-SA版权

本文介绍了如何在权限管理页面中利用ElementUI的Tree组件展示权限，并解决数据回显问题。通过在data中定义初始状态，从后台获取角色权限数据，再在用户点击确定按钮时更新选中状态，实现权限的正确展示和保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终呈现的效果
在这里插入图片描述点击权限管理跳转到相对应的权限页面

对应权限页展示

<template>
     <div id="app" v-cloak>
        <el-tree
            :data="rootData"
            ref="rootTree"
            show-checkbox
            node-key="id"
            default-expand-all
            @check="getKeys"
            :props="defaultProps"
            :default-checked-keys="checked">
        </el-tree>
        <el-button  type="primary" @click="quding" class="sure">确定</el-button>
    </div>
</template>
<script>
import { getArrayList, getRights, getRolePermission } from "./api.js";

export default {
  inject: ["reload"],
  data() {
    return {
      id: "",
      checked: [],
      rootData: [],
      permissions: [],
      defaultProps: {