封装 element-ui下拉选择树组件

父组件调用 下拉选择树组件<select-tree>：

html:

<select-tree :data="deepClone(selectTreeData)" :selectId="formData.parentId" @getParent="getParent" />

js:

filterDisable(data,id){// 过滤掉不能选择的树节点
      let copyData = deepClone(data)
      const len = data.length
      for(let i=0;i<len;i++){
        if(data[i].id === id || data[i].permissionType === 1){
          copyData.splice(i,1)
          copyData = this.filterDisable(copyData,id)
        }else if(data[i].children){
          copyData[i].children = this.filterDisable(data[i].children,id)
        }
      }
      return copyData
    },

下拉选择树组件select-tree：

<style lang="scss" scoped>
.select_layout{
  width:100%;
}
.select_tree{
    max-height:200px;
    width:100%;
    overflow: auto;
}
.select_tree::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.select_tree::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
    background: #b1b2b4;
}
.select_tree::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}

.select_input{
  display: block;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  color: #606266;
  padding: 0 10px;
  cursor: pointer;
  .input_value{
    float: left;
    width: calc(100% - 40px)
  }
  .input_icon{
    float: right;
    width:15px;
    color:#dcdfe6;
  }
}
</style>
<template>
  <div class="select_layout">
    <el-popover
      ref="pop"
      placement="bottom-start"
      :width="width"
      trigger="click">
      <div class="select_input" slot="reference">
        <div class="input_value">{{selectItem.permissionName}}</div>
        <div class="input_icon">
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
      </el-select>
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        class="select_tree"
      ></el-tree>
    </el-popover>
  </div>

</template>
<script>
export default {
  name:'selectTree',
  props:{
    data:{
      type:Array,
      default:[]
    },
    selectId:{
      type:Number,
      default:null
    }
  },
  data() {
      return {
        selectItem:{},
        defaultProps: {
          children: 'children',
          label: 'permissionName'
        },
        width:200
      };
    },
  watch:{
    selectId(val){
      this.selectItem = this.queryTree(this.data,val)
    }
  },
  mounted(){
    this.width = document.getElementsByClassName('select_layout')[0].clientWidth
    if(this.selectId){
      this.selectItem = this.queryTree(this.data,this.selectId)
    }
  },
    methods: {
      handleNodeClick(data) {
        this.selectItem = data
        this.$emit('getParentId',data.id)
        this.$refs.pop.doClose()
      },
      queryTree(treeData,id){
        const len = treeData.length
        for(let i = 0;i<len;i++){
          if(treeData[i].id === id){
            return treeData[i]
          }
          if(treeData[i].children){
            this.queryTree(treeData[i].children,id)
          }
        }
        return '无'
      }
    }
}
</script>

参考：https://www.cnblogs.com/yuwenjing0727/p/10214490.html