elementUI下拉树组件封装

使用组件：Popover 弹出框、Tree 树形控件 和 input 输入框

用法：

　　1、新建一个.vue文件，粘贴以下组件封装的代码（完全可以使用）

　　2、在页面需要使用下拉树的地方调用即可。

　　（1）import selectTree from '@/components/selectTree/selectTree'

　　（2）components: {selectTree}

　　（3）页面调用

组件封装代码：

<template>
  <div v-if="update">
    <el-popover
      popper-class="selectTree"
      placement="bottom-start"
      transition="fade-in-linear"
      v-model="visible"
      min-width="200"
      trigger="click">
      <el-tree
        :data="data"
        :props="defaultProps"
        empty-text="无数据"
        :node-key="defaultProps.id"
        :default-expanded-keys="defaultExpandedKeys"
        :check-on-click-node="true"
        ref="tree1"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :highlight-current="true"
        @node-click="handleNodeClick">
      </el-tree>
      <el-input
        v-model="filterText"
        @clear="clear"
        :placeholder="placeholder"
        :disabled="disabled"
        slot="reference"
        :clearable="clearable"
        :suffix-icon="icon">
      </el-input>
    </el-popover>
  </div>
</template>
<script>
  export default {
    name: 'selectTree',
    props: {
      value: String,
      data: Array,
      placeholder: {
        type: String,
        default: '请选择'
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      clearable: {
        type: Boolean,
        default: true,
      },
      filterable: { //禁选值
        type: String,
        default: undefined,
      },
      defaultProps: {
        type: Object,
        default() {
          return {
            children: 'children',
            label: 'label',
            id: 'id',
          }
        }
      },
      nodeKey: {
        type: String,
        default: 'id',
      }
    },
    data() {
      return {
        defaultExpandedKeys: ['-1'], //默认展开
        filterText: '',
        visible: false,
        icon: 'el-icon-arrow-down',
        update: true,
      }
    },
    async created() {
      if (this.filterable) {
        this.setFilter(this.data)
      }
    },
    mounted() {
      this.setFilterText()
    },
    watch: {
      value(val) {
        if (!val) { //没有值得时候
          this.filterText = ''
        } else {
          if (this.$refs.tree1) {
            this.$refs.tree1.setCurrentKey(val)
            let obj = this.$refs.tree1.getCurrentNode()
            if (obj) {
              this.filterText = obj[this.defaultProps.label]
              return
            } else {
              let tree = this.$refs.tree1
              this.$nextTick(() => {
                tree.setCurrentKey(val)
                let obj = tree.getCurrentNode()
                if (obj) {
                  this.filterText = obj[this.defaultProps.label]
                }
                return
              })
            }
          }
        }
      },
      visible(val) {
        if (val === true) {
          this.icon = "el-icon-arrow-up"
        } else {
          this.icon = "el-icon-arrow-down"
        }
      },
      filterable(val) {
        this.update = false
        this.setFilter(this.data)
        this.$nextTick(() => {
          this.update = true
        })
      }
    },
    methods: {
      setFilterText() {
        if (!this.value) {
          return
        } else {
          this.$refs.tree1.setCurrentKey(this.value)
          let obj = this.$refs.tree1.getCurrentNode()
          if (obj) {
            this.filterText = obj[this.defaultProps.label]
          }
        }
      },
      setFilter(arr) {
        arr.map(item => {
          if (item.id === this.filterable) {
            item.disabled = true
            if (item.children && item.children.length != 0) {
              this.setDisabled(item.children)
            }
          } else {
            item.disabled = false
            if (item.children && item.children.length != 0) {
              this.setFilter(item.children)
            }

          }
        })
      },
      setDisabled(arr) {
        arr.map(item => {
          item.disabled = true
          if (item.children && item.children.length != 0) {
            this.setDisabled(item.children)
          }
        })

      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      handleNodeClick(obj, node) {
        if (node.data.disabled === true || this.disabled === true) {
          return
        }
        this.$refs.tree1.setCurrentKey(obj[this.defaultProps.id])
        this.$emit('input', obj[this.defaultProps.id])
        this.filterText = obj[this.defaultProps.label]
        this.visible = false
      },
      clear() {
        this.$refs.tree1.setCurrentKey('')
        this.$emit('input', '')
      }
    },
    beforeDestroy() {
    },
    destroyed() {
    }
  }

</script>
<style lang="scss">
  .selectTree {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;

    div[aria-disabled="true"] {
      .el-tree-node__content {
        cursor: not-allowed;
      }
    }
  }

</style>

　　

组件封装代码

<selectTree
    :data="treeDataSelect"
    :defaultProps="{children:'children',label:'name',id:'id'}"
    :filterable="addDirForm.id"
     v-model="addDirForm.parentId">
</selectTree>

其中treeDataSelect的数据格式如下所示：

[
    {
        "id":"527AF5EB3A6A463294181DBE13E36CD7",
        "parentId":"-1",
        "dirType":0,
        "dirName":"test",
        "children":[
            {
                "id":"434051D4A7F5459FADCEC3A3BE79F83F",
                "parentId":"527AF5EB3A6A463294181DBE13E36CD7",
                "dirType":0,
                "dirName":"testChild",
                "children":null,
                "label":null,
                "name":"testChild"
            }
        ],
        "label":null,
        "name":"test"
    }
]

效果截图