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"
     }
 ]

效果截图