组件|Element:Tree 树形控件 详细学习

组件|Element:Tree 树形控件 详细学习

简述 📖 ：虽然经常使用element组件，但是树形控件🌲 用的相对少一些，脑子回想一下，发现对这个组件的概念几乎为0️⃣ 。🆗那就打开我的电脑，穿上女友👧 买的Zara的厚厚的棉服（像个大笨熊 🐻 😆 ），重新撸一下树形控件的知识点，🛫 。

1. 官网概念

   1. Tree 树形控件：用清晰的层次结构展示信息,可展开或折叠

2. 代码示例

   1. <template>
        <div>
          <h3>测试树形控件</h3>
          <!-- 
              empty-text ：data（源数据）为空是显示的内容
              check-strictly : 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
      		default-expand-all:是否默认展开所有节点 ,默认为false
          -->
          <el-tree ref="tree" :data="data" empty-text='暂无' :props="defaultProps" node-key="id" :current-node-key='nodeKey'
            check-strictly default-expand-all highlight-current show-checkbox @node-click="handleNodeClick"
            @check-change="handleCheckChange"></el-tree>
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
              nodeKey:'41',
              data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 41,
                    label: '二级 1-1',
                  },
                  {
                    id: 5214,
                    label: '二级 1-2',
                  },
                  {
                    id: 25356,
                    label: '二级 1-3',
                  },
                  {
                    id: 755325,
                    label: '二级 1-4',
                  },
                ]
              }, {
                id: 2,
                label: '一级 2',
                children: [{
                  id: 8,
                  label: '二级 2-1',
                  children: [{
                    id: 14,
                    label: '三级 2-1-1'
                  }]
                }, {
                  id: 9,
                  label: '二级 2-2',
                  children: [{
                    id: 13,
                    label: '三级 2-2-1'
                  }]
                }]
              }, {
                id: 3,
                label: '一级 3',
                children: [{
                  id: 10,
                  label: '二级 3-1',
                  children: [{
                    label: '三级 3-1-1'
                  }]
                }, {
                  id: 11,
                  label: '二级 3-2',
                  children: [{
                    id: 12,
                    label: '三级 3-2-1'
                  }]
                }]
              }],
              defaultProps: {
                children: 'children', //指定子树为节点对象的某个属性值--选择一个对象作为子节点使用
                label: 'label' //指定节点标签为节点对象的某个属性值--选择一个值作为label显示
              }
            };
          },
          created(){
        		//设置当前节点的方法（目前我这么用）      
              this.$nextTick(() => {
                  this.$refs['tree'].setCurrentKey(this.nodeKey)
                  console.log(this.$refs.tree.getCurrentKey());
              })
          },
          methods: {
            /* 
                node-click 节点被点击时的回调
                    三个参数，依次为：
                        1.传递给 data 属性的数组中该节点所对应的对象
                        2.节点对应的 Node
                        3.节点组件本身。
            */
            handleNodeClick(data1, data2, data3) {
              console.log(data1); //传递给 data 属性的数组中该节点所对应的对象
              // console.log(data2);//节点对应的 Node
              // console.log(data3);//节点组件本身
              /* 
              getCurrentKey 	获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
              */
              console.log(this.$refs.tree.getCurrentKey());
            },
            /* 
              check-change 节点选中状态发生变化时的回调
                  三个参数，依次为：
                      1.传递给 data 属性的数组中该节点所对应的对象
                      2.节点本身是否被选中
                      3.节点的子树中是否有被选中的节点
            */
            handleCheckChange(data, checked, indeterminate) {
              // console.log(data);
              /* 
                  getCheckedNodes 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
                      参数：(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，
                          1. 是否只是叶子节点，默认值为 false 
                          2. 是否包含半选节点，默认值为 false
              */
               console.log(this.$refs.tree.getCheckedNodes(true,false),'node');
              /* 
                  getCheckedKeys  若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
                      参数：(leafOnly) 接收一个 boolean 类型的参数，
                          若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
              */
               console.log(this.$refs.tree.getCheckedKeys(false),'key');
      
              /* 
                  getHalfCheckedNodes 若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点所组成的数组	
              */
               console.log(this.$refs.tree.getHalfCheckedNodes());
      
              /* 
              getHalfCheckedKeys 	若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组
              */
               console.log(this.$refs.tree.getHalfCheckedKeys());
            },
          }
        };
      
      </script>
      <style lang="">
      
      </style>
      
      

   2. 暂时就先整这么多了，没有搞完。后期遇到新知识，继续来补全。

不忘初心，人就容易走着走着就被周边的环境所影响，有时得意忘形，有时东怒西怨，完全忘记了刚进入新环境时的心里许下的诺言 ---- 时常提醒正在默默努力的自己。