新建角色菜单树展示和选择菜单

TrueAndFalse
65 阅读1分钟

目标展示菜单树

image.png

1.使用饿了么组件

image.png 1.2在弹出表单中添加插槽

image.png

2.在vuex中发送请求

image.png

image.png

3.给组件添加数据

image.png

4.还需要一个回显功能,就是点击编辑,有的权限需要自动选中,这就遇到一个问题,是根据表单中的数据来显示菜单树的数据,可是表单和菜单树是两个独立的组件,所以我们采用的方法是定义一个对象,然后把数据都添加到对象中,根据对象中的数据来显示菜单树

image.png

使用自带属性

image.png

image.png

把选中和没选中的数据都传入给otherInfo

image.png

image.png

因为点击编辑,我们需要选中的表单的数据,这个数据在page-content中,但是我们封装了一个hook,可以在hook中获取

image.png

editcb中可以传递一个参数CallbackFn,之前这个参数是一个空值,现在设置一个可传可不传的参数

image.png

然后在主页面解构方法数据

image.png

接下来我们需要把数据绑定给组件

1.我们采用ref来绑定

image.png

2.我们设置了ref属性,所以要设置ref

image.png

image.png

3.接下来就是设置编辑方法

image.png

3.1但是需要需要先设置一个属性node-key

image.png

avatar
文章
阅读
粉丝