• 使用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"属性,设置父子节点不关联.

     效果图

  • 相关阅读:
    codeforces C. No to Palindromes!
    codeforces D. Pashmak and Parmida's problem
    codeforces C. Little Pony and Expected Maximum
    codeforces D. Count Good Substrings
    codeforces C. Jzzhu and Chocolate
    codeforces C. DZY Loves Sequences
    codeforces D. Multiplication Table
    codeforces C. Painting Fence
    hdu 5067 Harry And Dig Machine
    POJ 1159 Palindrome
  • 原文地址:https://www.cnblogs.com/shanchui/p/14372030.html
Copyright © 2020-2023  润新知