vue3实现表格Table对菜单的控制

兔子在峡谷
417 阅读2分钟

Watermelon_Two Color.png

夏天了吃口瓜。大家好，我是风流倜傥兔bug。前端权限控制总是离不开对树形菜单的回显和勾选，本文就是带你处理这种情况。

上菜

瞅瞅这是啥👀， 看着就头疼。炎炎夏日，吃口瓜不行么，整这么复杂干哈呢。还好这不止一个地方，坐等大佬写完ctr c、ctr v。N久后...，”大佬你在干啥？“， ”嗯，我在等你写“。 ”吐血中..."。算了闲话不多说，开整了。

截屏2022-06-13 下午10.13.14.png

走，买菜去不

嗯，那就使用Vben Admin系统管理框架， 组件使用BasicTable（基于AntDesignVue的Table)， carbon (2).png

接口数据格式 carbon (3).png

嘿，肉没切，菜还没择呢，你咋就起锅了

既然是树结构，那就要思考两个问题，树怎么转数组，数组怎么转树呢。当然是递归了呀，还有么，嗯，那就用队列，将children值放队列里，直到为空。

  1. 数组转树 carbon (4).png
  2. 树转数组 carbon (5).png

起锅

需求：

  1. 按钮节点控制所有父节点全选按钮的显示
  2. 页面模块节点控制上层所有父节点和下层子节点按钮的显示
  3. 末级页面全选按钮放左边，其他放右边，则通过pageOpList是否为空判断是否为末级页面 OK，那就要增加字段checkAll和indeterminate控制全选按钮全选和半选，按钮通过CheckboxGroup组件，则需要增加字段checkedList和plainOptions carbon (6).png

别愣着了，油都冒烟了

数据初始化了。按钮通过isSelected控制选中，全选又通过按钮判断全选还是半选。得了，那只能先递归到末级页面，处理按钮选中，再递归到外层父级，处理全选。

  1. 首先写个递归 carbon (7).png
  2. 处理末级数据 carbon (11).png
  3. 通过menuId进行映射，方便取数据 carbon (12).png carbon (13).png
  4. 处理页面模块全选按钮 carbon (15).png carbon (16).png 至此，页面初始化数据就完成，页面可以显示全选和按钮的勾选了

火在烧，汗在流，手别停

接下来就要对页面交互进行处理了

  1. 勾选按钮checkbox，onCheckAllChangeButton获取两个参数，checkedList勾选的列表，以及末级页面menuId.先处理末级页面全选，在往上递归。 carbon (17).png
  2. 末级页面全选按钮操作，onCheckAllChangeOp carbon (18).png
  3. 其他全选按钮，onCheckAllChangeMenu，需要往上遍历父节点，往下子节点 carbon (19).png

收汁，装盘

本文主要将isSelected显示正确值 carbon (20).png

至此，就是对Table中的菜单控制的全部内容，你学废了么。

仓库地址

avatar
文章
阅读
粉丝