element tree组件回显

最新推荐文章于 2025-05-13 16:12:31 发布

LuWeiFun

最新推荐文章于 2025-05-13 16:12:31 发布

阅读量701

点赞数

CC 4.0 BY-SA版权

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_60997870/article/details/125262779

该博客介绍了如何在Vue.js应用中利用Element UI的树形组件（el-tree）进行权限管理。通过设置节点属性，如`default-expand-all`和`check-on-click-node`，实现全展开及点击节点选中功能。同时，`data`和`default-checked-keys`用于数据绑定和初始化已选中项。在`getMenuRole`方法中获取并设置回显的权限数据，而在`submit`方法中获取选中节点并提交更新的权限列表。

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

HTML部分

  <el-tree
       :data="data"
       show-checkbox
       default-expand-all
       node-key="id"
       ref="tree"
       highlight-current
       :props="defaultProps"
       :default-checked-keys="resourceCheckedKey"
        check-on-click-node> </el-tree>

JS部分

  data() {
        return {
            dataList: [],
            data: null, //全部菜单
            defaultProps: {
                children: 'childNode',
                label: 'text',
                id: 'id'
            },//配置子节点属性
            resourceCheckedKey: []//需要回显的数据
        };
    },


methods:{
    //获取需要回显的数据
    async getMenuRole() {
            let { data: res } = await menuRole({ roleId: this.id });
            if (res.code == '200') {
                this.resourceCheckedKey = res.data.map((e) => {
                    return e.menuId_ButtonId;
                });

            }
        },
    //提交新数据
   async submit() {
            let arr = this.$refs.tree.getCheckedNodes();//获取已经选中的节点
            let arr1 = arr.map((e) => {
                return {
                    menuId_ButtonId: e.id,
                    type: e.cacheObject.classify
                };
            });
            let obj = {
                roleId: this.id,
                menuList: arr1
            };
            let { data: res } = await setMenuRole(obj);
            if (res.code == '200') this.returnManage(true)
        },


}