技術標籤：vuevue

元件

<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框賦值， 僅做展示用