element Tree 树形控件 （完整笔记）

操作：笔记

例子：练手

html：

 <el-tree class="org-tree" 
 		 ref="orgTree" 
 		 :data="data" 
 		 :props="defaultProps" 
 		 node-key="zhujian" 
 		 show-checkbox
         :default-expanded-keys="['1']" 
         :render-after-expand="true" 
         :expand-on-click-node="false"
         :highlight-current="true" 
         @check-change="handleCheck">
</el-tree>

json：假数据

 data: [
    {
        zhujian: '0',
        jiancheng: '中国铁道建筑总公司',
        children: [
            {
                zhujian: '1',
                jiancheng: '中国铁建股份有限公司',
                children: [
                    {
                        parent: '1',
                        zhujian: '101',
                        jiancheng: '信息化管理部'
                    },
                    {
                        parent: '1',
                        zhujian: '102',
                        jiancheng: '经济管理部'
                    },
                    {
                        parent: '1',
                        zhujian: '103',
                        jiancheng: '国际部'
                    },
                ]
            },
            {
                parent: '0',
                zhujian: '10',
                jiancheng: '中土集团',
                children: [
                    {
                        parent: '10',
                        zhujian: '1001',
                        jiancheng: '尼日利亚国别公司'
                    },
                    {
                        parent: '10',
                        zhujian: '1002',
                        jiancheng: '埃塞俄比亚国别公司'
                    },
                    {
                        parent: '10',
                        zhujian: '1003',
                        jiancheng: '东南非区域市场'
                    },
                    {
                        parent: '10',
                        zhujian: '1004',
                        jiancheng: '中东北非区域市场'
                    }
                ]
            },
            {
                zhujian: '11',
                jiancheng: '中铁十一局',
            }
        ]
    }],
    defaultProps: {
    children: 'children',
    label: 'jiancheng'
}

js，方法

//获取数据方法
handleCheck(data, checked, indeterminate) {
    let nodes = this.$refs.orgTree.getCheckedNodes().concat(this.$refs.orgTree.getHalfCheckedNodes())
    let filterNodes = nodes.filter(node => { // 过滤出子节点，也就是不含childred字段的节点数据
        return node.children === undefined
    })

    let node = []
    let node2 = []
    let node3 = []
    for (var i = 0; i < filterNodes.length; i++) {
        if (filterNodes[i].parent) {
            let pnode = this.$refs.orgTree.getNode(filterNodes[i].parent)   //获取父节点
            let parent = pnode.data.jiancheng
            node[i] = parent + "/" + filterNodes[i].jiancheng
            node2[i] = parent 
            node3[i] = filterNodes[i].jiancheng
        }
        else {
            node[i] = filterNodes[i].jiancheng
            node3[i] = filterNodes[i].jiancheng
        }
    }



console.log(node)//输出选中的数据
console.log('2',...[new Set(node2)])//输出去重2级目录，选中的数据
console.log('3',node3)//输出

项目真实用

---

default-expanded-keys 和 default-checked-keys 设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

<el-tree class="org-tree" ref="orgTree" v-loading="loading"
    :default-expanded-keys="jdexpandedKeys"
    :default-checked-keys="jdStreet"
    accordion :data="data" :props="defaultProps" node-key="id" show-checkbox
    :render-after-expand="true" :expand-on-click-node="false"
    :highlight-current="true" @check-change="handleCheckqx">
  </el-tree>

data（）{
	return{
        dwregion:[],//接口返回的三级树控件
        jdexpandedKeys:[]//回显
        jdStreet:[]//回显
		defaultProps:{//参数格式
          children:'children',
          label:'name'
        },
	}
}

handleCheckqx() {
          let nodes = this.$refs.orgTree.getCheckedNodes().concat(this.$refs.orgTree.getHalfCheckedNodes())
          let filterNodes = nodes.filter(node => { // 过滤出子节点，也就是不含childred字段的节点数据
              return node.children===null
          })
          this.sdiction.areasPermission=[]
          let node = []
          let node2 = ''
          let node3 = ''
          let node4 = ''
          for (var i = 0; i < filterNodes.length; i++) {
            let pnode = this.$refs.orgTree.getNode(filterNodes[i].id)   //获取父节点
              if (filterNodes[i].id) {
                  node[i] =pnode.parent.parent.data.name+'/'+pnode.parent.data.name+'/'+ filterNodes[i].name;
                  node2=pnode.parent.parent.data.id;
                  node3=pnode.parent.data.id;
                  node4=filterNodes[i].id;
                  this.sdiction.areasPermission.push({
                    communitId:`${node4}`,//社区code
                    streetId:`${node3}`,//街道
                    districtId:`${node2}`,//地区
                  })
              }
          }
      },