elementUI树组件

组件

<template>
  <div>
    <el-autocomplete
      ref="searchInput"
      v-model="searchData"
      :fetch-suggestions="querySearch"
      :placeholder="treeProps.placeholder"
      :size="treeProps.size"
      clearable >
      <el-tree
        ref="tree"
        :data="orgData"
        :props="treeProps"
        :filter-node-method="filterNode"
        :default-expand-all="false"
        row-key="companyId"
        @node-click="nodeClick" >
        <span slot-scope="{ node, data }">
          <span :title="data[treeProps.label]">
            {{ data[treeProps.label] }}
          </span>
        </span>
      </el-tree>
    </el-autocomplete>
  </div>
</template>
<script>
export default {
  name: 'TreeSelect',
  props: {
    orgData: {
      default: function() {
        return []
      },
      type: Array
    },
    treeProps: {
      default: function() {
        return {
        }
      },
      type: Object
    }
  },
  data() {
    return {
      searchData: '',
      clickFlag: false
    }
  },
  watch: {
    searchData(val) {
      // 若nodeClick，展示所有数据
      const filterdata = this.clickFlag ? '' : val
      if (this.$refs.tree) {
        this.$refs.tree.filter(filterdata)
      }
      this.clickFlag = false
      if (!val) {
        this.$emit('clearNode')
      }
    }
  },
  mounted() {
    // 自定义clear函数覆盖原本的handleClear函数，解决清除后下拉框消失问题
    this.$refs.searchInput.handleClear = () => {
      this.searchData = ''
      this.$refs.searchInput.focus()
    }
  },
  methods: {
    querySearch(queryString, callback) {
      var data = [{ value: '' }]
      var results = queryString
        ? data.filter(restaurant => {
          return true
        })
        : data
      // 调用 callback 返回建议列表的数据
      callback(results)
    },
    // 树过滤
    filterNode(value, data) {
      if (!value) {
        return true
      }
      // 父组织及所属子组织都返回
      return data[this.treeProps.label].indexOf(value) !== -1 || (data['pname'] && data['pname'].indexOf(value) !== -1)
    },
    // 选中树组织
    nodeClick(data) {
      // 父组织不可点击
      if (!this.treeProps.parentClick && data.child.length > 0) {
        this.clickFlag = false
        this.searchData = ''
      } else {
        this.clickFlag = true
        this.searchData = data[this.treeProps.label]
        this.$refs.searchInput.close()
        this.$emit('nodeClick', data)
      }
    },
    // 父组件传值
    propsFromFatherComp(data) {
      this.searchData = data
      this.clickFlag = true
    }
  }
}
</script>

引用

<tree-select
    ref="treeSelect"
    :org-data="orgList"
    :tree-props="treeProps"
    @nodeClick="nodeClick"
    @clearNode="clearNode"
/>

参数

treeProps: {
    children: 'child', // 子元素的数组
    label: 'fullName', // 展示的文字
    size: 'mini', // input框的size
    placeholder: '请选择', // input框的占位文字
    parentClick: false // 父节点是否可以点击
},

为组件输入框赋值

    this.$refs.treeSelect.propsFromFatherComp('') 为组件的input框赋值， 仅做展示用