00:00
我们先来编写菜单删除功能,哪些菜单能被删除呢?那就是没有子菜单,并且没有被别的地方引用,想要删除呢?我们先来展示页面的删除效果,我们参照element UI,在这一块呢,可以使用render content以及SCO的SLOT2种方式可以实现这些效果,那我们直接参照它下边的代码,如果使用render content,其实呢,它是给element UI的这个EL tree里边添加一个render content,这re content呢是下边的一个函数,我们来往下找,诶,Re content直接可以来返回我们所要显示的DOM元素,那这种方式呢,我们就不使用了,我们使用这个scoop的slot方式,它呢编写起来更加友好,我们看到这个scooped slot在这里边呢,我们只需要给EL tree里边,诶,这个标签体里边写一个span标签,那这个span标签里边呢,就有这些button按钮,那我直接把这个。
01:00
标签复制过来,我们放到我们的element。这个EL tree元素里边CL v auto shift f代码整理一下,那在这个里边呢,添加了两个按钮,一个是openend的按钮,一个是delete按钮,它是使用view的slot,也就是插槽机制,那这个东西呢,我们直接使用就行了,通过这种写法,那每一个元素后边呢,都会额外的加上它们,哎,这一块呢,就显示了节点的名字,以及两个按钮,点击的时候呢,也绑定了,单击事件会调相应的方法,特别是注意在插槽里边在传了两个参数,这呢是一个对象的方式,这其实是一种解构写法,传了一个nude,传了一个data。Note呢,代表我们当前的这个节点,我们可以拿到节点的label值,那就是标签的名字,包括data呢,是真正这个节点的数据。答,我们每点击一个这个按钮,会把这些数据呢传给我们想要调用的方法,诶,我们这是使用箭头函数来调用我们指定的方法,那理所应当这些方法就应该在muscles里边有写,那我们就把这两个方法呢也复制过来。
02:14
我们分别把它的end方法以及remove方法,我来复制过来,这两个方法的实现呢,我们就给它删掉,我们这个实现呢,不用它的这个示例,我们是要真正发送请求实现的,那当被点击以后呢,我们还是先在这控制台先打印一下conso.log。这个呢是aend,相当于点击按钮,想要给它添加一个节点,好,我们放在这,我们同时把它传过来的参数是什么,我们也看一下,比如我们这一块是remove,我们把它传来的两个参数,一个是node,一个是data,我们都看一下order shift f代码整理保存,那现在来看一下页面效果,现在呢,我们发现在这一块呢,都显示了这些按钮,F12我们能看到,当我们点击这些按钮的时候,来看一下,比如我点这个delete,那在这一块呢,就调用了我们的remove方法。这两个参数呢,第一个node是代表当前节点的值,当前节点有没有被选中及当前节点是否展开状态,以及当前节点所处的层级等等,这些节点信息呢都有。第二个对象呢,它是一个data,这个data呢,就是当时我们从数据库里面获取到的节点,真正内容节点的ID,节点的所有子节点,包括节点的名字,它。
03:34
它的副ID等等这些信息呢,都会有打印,但是呢,我们这儿还有一个问题,就是当我们来点这个按钮的时候啊,我们发现它还会展开合并,比较影响操作,那我们可以来参照文档,在文档里边呢,我们来看这个事例里边,他们还额外加了一个叫expand on click node,写一个false,它是什么意思,我们可以参照文档往下翻。
04:02
在这儿呢,有这个属性代表的意思,它默认的是触,它是是否在点击节点的时候展开或者收缩,节点默认为触,那就是只要节点被点击,它就会收缩,而我们如果调成false了,那只有点击这些箭头的时候,那在这儿才会收缩,所以呢,我们这个界面需要给它调成false,那我们就把这个属性复制来。而且呢,我们给这个属性赋值的时候,我们来看前面的写法。我们是使用冒号,我们都知道这个冒号写法呢,是V杠棒的缩写,好我们给这个首先绑定一个值,这个值就是false,好我们就给EL tree里边加上这个属性,它的值呢是false,同时呢,我们把这个当时的这个单击函数,我们就不要了。把这一块的单击函数我们就不要了,暂时没啥用来保存一下,现在呢,我们来看一下页面效果,当我们现在来点的时候,诶,就不会展开合并了,只有点击箭头才行,这是第一个效果,第二个效果我们什么时候显示这个openend,什么时候显示delete,只有我们这个菜单没有子菜单的时候,我们才可以在页面上显示这个delete按钮,只有我们这个菜单是一级菜单或者二级菜单的时候,我们才显示openend的按钮,因为我们总共是三级分类,所以呢,三级菜单是不可以追加元素的,那按照这个要求,我们把它们在合适的时机给它显示出来,怎么显示呢?我们还是来到在这一块,我们看到这个span里边有两个button按钮,那什么时候显示,我们就可以使用V-if判断一下。
05:47
只有当前节点的层级是一级或二级,我们才来给它展示aend的,也就是它是一级分类或者二级分类,它才可以给它追加。那怎么判断一级和二级,我们都知道一点按钮,我们这个会传两个对象,一个是当前节点对象,一个是data,在当前节点对象里边有一个叫level,它能表示当前是几级节点,那我们就可以用这个node node就是当前节点对象,诶我们在点delete的时候打印的第一个就是它。
06:21
我们使用node点一个它里边的level。Level呢,我们让它小于等于二,那小于等于二呢,那就是一级或者二级分类,我们才给它显示aend的,同样的们在这儿v if,只有当我们这个节点没有子节点,我们才可以给它显示删除按钮,无论是一级分类,二级分类还是三级分类,只要没子节点,我们都可以删除,但真正的删除我们发请求,后台还要判断,如果被人引用了也不能删。好我们在这儿呢,判断一下如何判断它是否有子节点,那当前节点这个node或者用这个data塔都行,我们打印的第二个对象是data塔,它们里边呢有一个属性叫丘疹,Node里边呢有一个叫差no,这都代表当前的子节点,我们就用node里边的差no,好,Node里边差no这是一个数组,数组的LIS只要等等零,那说明呢,它没有子节点,我才给你显示这个按钮,我来保存一下,现在来。
07:26
看页面效果,我们来刷新,我们现在看到呢,一级和二级分类都显示了aend,只有三级分类,并且呢没有子节点,我们在这显示了delete,而且在下边那这呢有一个虽然是二级分类,但是呢它没有子节点,所以既显示了delete,又显示了end。同样的,我们后来呢,可能也会有选择多个批量删除的功能,那我们同时呢,就来给他加上这些选择框,怎么加呢?非常简单,只需要给EL tree里边添加一个属性,叫show check box,这个是什么意思,都可以查官方文档,Ctrl shift f,我们来可以将它搜索一下,看文档里边说它,那它的。
08:10
意思呢,就是节点是否可以被选择,默认呢,这是first,那我们只要加上这个字段,那节点呢,就是可以被选择的,或者给它复制为处都行,那我们给这呢写上show check box来保存一下,现在呢,我们来看到这个节点,诶这一块呢,都是可以被选择的,方便我们以后批量选择,而且这些选择呢,已经带了全选全部选择这些功能。同时呢,我们再来设置上一个配置,来往上边看,我们在这设置的时候呢,还有一个属性叫node k,我们推荐这个EL tree里边一定要设置这个node k,它是什么呢?来CTRLC复制在这搜索一下,这个node k的意思啊,就是每一个数节点用来做唯一标识的属性,它在整个数里边都是唯一的,这样呢,我们这个EL tree就能分辨每一个节点的不同,那我们就来写上这个属性node k,哪个属性是来用来标识唯一节点的,Node k等于什么?我们每一个节点啊都有一个属性,来在控制台F12看一下。
09:20
每一个节点,当我来点击的时候呢,每一个节点都有个属性叫count ID,这是唯一的,所以呢,我们在这写node k等于count ID。Alt shift f代码整理一下,那这次呢,我们就把相关的基本配置我们就来写完了。下一节课呢,我们就来真正的来发送请求,进行相关的删除功能。
我来说两句