element tree组件回显

最新推荐文章于 2024-07-24 16:37:02 发布

LuWeiFun

最新推荐文章于 2024-07-24 16:37:02 发布

阅读量629

点赞数

文章标签： elementui vue.js javascript

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

版权

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)
        },


}