用jquery写element树形控件 element tree树形控件

转载

代码工匠大师 2023-10-14 09:18:03

文章标签 用jquery写element树形控件前端 vue 二级数组 文章分类 jQuery 前端开发

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

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

官网概念

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

代码示例

<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>