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


    el-tree组件实现禁止选中父组件操作

    关键点:disabled:true。

    tree.json数据

    [{
            "id": "1",
            "name": "计算机信息管理",
            "children": [{
                "id": "a1",
                "name": "团委",
                "children":[{
                    "id":"b1",
                    "name":"Lisa"
                },{
                    "id":"b2",
                    "name":"Lizzy"
                }]
            }, {
                "id": "a2",
                "name": "同学1"
            }, {
                "id": "a3",
                "name": "同学2"
            }, {
                "id": "a4",
                "name": "同学3"
            }, {
                "id": "a20",
                "name": "同学4"
            }, {
                "id": "a5",
                "name": "同学5"
            }]
        }, {
            "id": "2",
            "name": "计算机网络通信",
            "children": [{
                "id": "a6",
                "name": "同学6"
            }, {
                "id": "a7",
                "name": "Linda"
            }]
        }, {
            "id": "3",
            "name": "计算机大数据",
            "children": [{
                "id": "a8",
                "name": "黄1"
            }, {
                "id": "a9",
                "name": "吕1"
            }, {
                "id": "a10",
                "name": "聂1"
            }, {
                "id": "a11",
                "name": "童1"
            }]
        },{
            "id":"4",
            "name":"计算机软件开发",
            "children":[
                {
                    "id": "a12",
                    "name": "韩1"
                }
            ]
        },{
            "id":"5",
            "name":"其他",
            "children":[
            ]
        }
    ]

    index.vue

    <template>
        <el-tree
            :data="treeData"
            show-checkbox ref="tree"
            :props="defaultProps"
            :highlight-current="true"
            node-key="id"
            empty-text="数据加载中……"
            :check-strictly="true"></el-tree>
    </template>
    
    <script>
      export default {
        data() {
          return {
            treeData: [], //树型结构数据
            defaultProps:{//树型图配置
              children:"children",//指定子树为节点对象的某个属性值
              label:"name"//指定节点标签为节点对象的某个属性值
            },
    
          }
        },
        mounted() {
          this.init();
        },
        methods: {
          init() {
            this.$http.get("http://localhost:3000/public/tree.json").then(res => {
    
              this.treeData = this.disabledParent(res.data);
              console.log(this.treeData)
            })
          },
          // 禁止父节点被点击
          disabledParent(data){
            data.forEach((node)=>{
              console.log(node)
              if(node.children){
                node.disabled=true;
                this.disabledParent(node.children)
              }else{
                return
              }
            })
            return data;
          },
        }
      };
    </script>

    总结:循环遍历数据,判断某一项是否有子节点,有子节点代表是父节点,给相应的父节点添加"父节点.disabled:true"属性,因为可能数据会层层嵌套,所以要使用递归进行判断,能够找到里面的所有父节点进行设置.  要加上  :check-strictly="true"属性,设置父子节点不关联.

     效果图

  • 相关阅读:
    URAL 1018 Binary Apple Tree
    URAL 1029 Ministry
    URAL 1039 Anniversary Party
    URAL 1078 Segments
    Codeforces 918D
    Codeforces 918C
    URAL 1495 One-two, One-two 2
    URAL 1244 Gentlemen
    URAL 1658 Sum of Digits
    URAL 1081 Binary Lexicographic Sequence
  • 原文地址:https://www.cnblogs.com/shanchui/p/14372030.html
Copyright © 2020-2023  润新知