zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Web2.0技能评测
    [收藏]流程设计和优化原则
    [读书笔记1] 卓有成效的管理者(彼得.德鲁克)
    [读书笔记3] 卓有成效的管理者聚焦贡献
    [读书笔记2] 卓有成效的管理者管理时间
    动态生成的Web软件 应该如何设计???
    Logs
    JQuery推荐插件(200+)
    Spring AOP 实例
    《JavaScript凌厉开发Ext详解与实践》一书说了些什么
  • 原文地址:https://www.cnblogs.com/javalinux/p/15403073.html
Copyright © 2011-2022 走看看