• 使用element-ui框架的积累(四)


    如何实现树型结构单选

    树型结构数据 single.json

    [{
        "id": "1",
        "label": "running man",
        "children": [{
            "id": "r1",
            "label": "刘在石"
        }, {
            "id": "r2",
            "label": "池石镇"
        }, {
            "id": "r3",
            "label": "金钟国"
        }, {
            "id": "r4",
            "label": "gray"
        }, {
            "id": "r5",
            "label": "HAHA"
        }, {
            "id": "r6",
            "label": "宋智孝"
        }, {
            "id": "r7",
            "label": "李光洙"
        }]
    },{
        "id":"2",
        "label":"仙剑奇侠传三",
        "children":[
            {
                "id":"x1",
                "label":"景天"
            },{
                "id":"x2",
                "label":"徐长卿"
            },{
                "id":"x3",
                "label":"龙葵"
            },{
                "id":"x4",
                "label":"茂茂"
            },{
                "id":"x5",
                "label":"唐雪见"
            },{
                "id":"x6",
                "label":"紫萱"
            },{
                "id":"x7",
                "label":"重楼"
            },{
                "id":"x8",
                "label":"邪剑仙"
            }
        ]
    },{
        "id":"3",
        "label":"山海情",
        "children":[
            {"id":"s1","label":"李水花"},
            {"id":"s2","label":"白麦苗"}
        ]
    }]

    index.vue

    <template>
      <el-tree :data="singleTree" node-key="id" ref="singleTree" show-checkbox :check-strictly="true" @check-change="handlerSingleSelect"> </el-tree>
    </template>

    <script>
      export default {
        data() {
          return {
            singleTree:[],//实现单选树型结构数据
          }
        },
        mounted() {
          this.init();
        },
        methods: {
          init() {  
            this.$http.get("http://localhost:3000/public/single.json").then(res=>{
              this.singleTree=this.disabledParent(res.data);
            })
          },
          // 禁止父节点被点击
          disabledParent(data) {
            data.forEach((node) => {
              if (node.children) {
                node.disabled = true;
                this.disabledParent(node.children)
              } else {
                return
              }
            })
            return data;
          },
          handlerSingleSelect(data,check,node){
            if(check){
              this.$refs.singleTree.setCheckedNodes([data])
            }
            console.log(data,node)
          }
        }
      };
    </script>
  • 相关阅读:
    浅谈一致性Hash原理及应用
    学习sql中的排列组合,在园子里搜着看于是。。。
    SQL Server DAC——专用管理员连接
    通过phantomjs 进行页面截图
    《javascript算法--对象的比较》
    React-生命周期的相关介绍
    常用的谷歌插件
    webpack的externals的使用
    mac 10.12显示隐藏文件
    “文字”聚合、散出动画-转自奇舞团
  • 原文地址:https://www.cnblogs.com/shanchui/p/14379757.html
Copyright © 2020-2023  润新知