• 树行表达方式


    树形图的结构大家不言而喻 ,非常的好用以及实用的完美性相结合,所以现在我给大家简洁的介绍一下树行的用法以及结构性!!

    1.常规用法

    这是树行结构的一个表视图 主要表达省份 市  以及区,这样做的目的呢,就是更加鲜明的表达出结构的用意 用来凸显实用化 简洁化 完美化 的这一部分。

    1. <div id="test12" class="demo-tree-more">div>
    2. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    3. <legend>常规用法legend>
    4. fieldset>
    1. ,data1 = [{
    2. title: '江西'
    3. ,id: 1
    4. ,children: [{
    5. title: '南昌'
    6. ,id: 1000
    7. ,children: [{
    8. title: '青山湖区'
    9. ,id: 10001
    10. },{
    11. title: '高新区'
    12. ,id: 10002
    13. }]
    14. },{
    15. title: '九江'
    16. ,id: 1001
    17. },{
    18. title: '赣州'
    19. ,id: 1002
    20. }]
    21. },{
    22. title: '广西'
    23. ,id: 2
    24. ,children: [{
    25. title: '南宁'
    26. ,id: 2000
    27. },{
    28. title: '桂林'
    29. ,id: 2001
    30. }]
    31. },{
    32. title: '陕西'
    33. ,id: 3
    34. ,children: [{
    35. title: '西安'
    36. ,id: 3000
    37. },{
    38. title: '延安'
    39. ,id: 3001
    40. }]
    41. }]

     这些呢,就是表明树行结构的代码,主用data 来表示其中的用意,title表示的就是省份 当然 在里面也可以包含chidren 再次声明一个title来表明其中的一个市级城市 也可以一直套用chidren 来套用这个,可以无线连接下去,表明其中的实用关系。

    2.手风琴模式

    此图也是树行结构的图形 但是使用方法与前一种是完全不相同的结构 ,但是大致的意思是完全的相同,所以说二者选一的抉择,所谓换汤不换药的这种方式去表达同一种意思!

    1. <div id="test2" class="demo-tree">div>
    2. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    3. <legend>手风琴模式legend>
    4. fieldset>
    1. tree.render({
    2. elem: '#test4'
    3. ,data: [{
    4. title: '优秀'
    5. ,children: [{
    6. title: '80 ~ 90'
    7. },{
    8. title: '90 ~ 100'
    9. }]
    10. },{
    11. title: '良好'
    12. ,children: [{
    13. title: '70 ~ 80'
    14. },{
    15. title: '60 ~ 70'
    16. }]
    17. },{
    18. title: '要努力奥'
    19. ,children: [{
    20. title: '0 ~ 60'
    21. }]
    22. }]
    23. ,accordion: true
    24. });

    树行表达图基本就是介绍这两种了,其实还有很多我就不一一介绍其他的方法方式了,只要记住都是换汤不换药的这种模式,认真去探求,一定是没有任何问题的! 加油,少年!

  • 相关阅读:
    你知道防抖和节流与闭包的关系吗?
    解决 vue3 element 表格和图片预览样式有冲突
    vue2 sass 安装及使用
    [信息论]信道容量迭代算法程序设计(基于C++&Matlab实现)
    skywalking中gateway的拓扑图没有出现
    Vue01-vue的简介
    那些.NET中的连接池
    微信小程序里边怎么添加付费视频_怎么做付费视频小程序
    Golang PDF转图片 拼接长图 压缩PDF及图片 输出JPEG
    ldap简单理解
  • 原文地址:https://blog.csdn.net/weixin_57725431/article/details/125905524