el-tree，获取节点数据并展示

效果展示：点击按钮--->出现树-->选中数据-->展示在页面

逻辑：树组件，获取选中数据，找到父节点，传给父组件

遇到的问题：节点有key和jiancheng两个数据，要写上parent记录父节点，在获取选中节点的父节点数据时好获取

效果：

 

 

 

 

代码：

子组件（树结构）：

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="nodeClick"

@check-change="handleCheck"

>

<span slot-scope="{ node }" class="custom-tree-node">

<span v-if="node.label" class="el-icon"><i class="el-icon-office-building"></i></span>

<span>{{ node.label }}</span>

</span>

</el-tree>

 

 

ts

 $refs!: {
    orgTree: any
  }
  datas: any[]=[] 

  data: any[] = [
    {
      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: '中铁十一局',
        }
  ]




//获取数据方法
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: any[]=[] 
            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         
              }
              else{
                  node[i]=filterNodes[i].jiancheng
              }
          }
              
              this.datas=node
              
            
             this.$emit('getdata',this.datas)  //传数据给父节点
          
       
        }

 

 

父组件

html

 <el-form-item prop="apply" label="适用范围 ：">
            <el-button style="width:100%" @click="showOrgTree">选择单位/组织</el-button>

            <dialog-org-tree ref="dialogOrgTree" @getDatas="getDatas"></dialog-org-tree>
          </el-form-item>


 <el-table :data="datas" border stripe height="200px">
              <el-table-column type="index" label="序号" width="50px" ></el-table-column>
              <el-table-column prop="datas"  label="适用范围">
                <template slot-scope="scope" prop="datas">{{ scope.row}}</template>
              </el-table-column>
            </el-table>

ts

getDatas(data) {
    this.datas = data
  }

知识点：

1.handleCheck(data,checked,indeterminate)方法获取数据

2.this.$emit("父组件方法名",data)   //data是要传递的数据

2.  数据展示：  
                <template slot-scope="scope" prop="datas">{{ scope.row}}</template>