uni-app根据后台数据动态生成树形checkbox,点击提交获取绑定checked项以及实现显示默认checked项


上次做的那个是个非树状的,这次我看从后台传过来的数据是树形的数据,前面的那个方法显然已经不适用了
先看做成的效果:

 

 

https://ext.dcloud.net.cn/plugin?id=1000
方法如下:
首先我们需要用到一个组件,tree树组件
这个组件和element中的el-tree差不多,用法上有一点点区别
下面就直接贴代码了

<template>
<ly-tree :tree-data="menuList"
ref="tree"
node-key="id"
accordion
showCheckbox
:checkStrictly="true"
:expandOnCheckNode="false"
:props="permissionProps"
:defaultCheckedKeys="selectedID"
@check="selectMenu"
>
</ly-tree>
</template>
 
其中: node-key=“id” 是必须要写的,组件的说明文档上写的很清楚,不再赘述
:defaultCheckedKeys=“selectedID” 为后台默认选中项的id值,放到一个数组里面了
:props=“permissionProps”: 在ruturn{}中定义:

permissionProps: {
children: 'children',
label: 'menuName'
},
 
根据自身的数据进行修改即可

@check=“selectMenu”:是把选中的项的值放到数组里面的方法

selectMenu() {
this.checkEquip = this.$refs.tree.getCheckedNodes(false, true)
this.selectList = []
},
 
然后传到后台就行了

完事,找了好久,uniapp原有组件没办法解决,所以只能找组件了


————————————————
版权声明:本文为CSDN博主「田不甜 tbt」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_45959912/article/details/113308229


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM