element-plus 封裝下拉樹實現

<template>
  <div>
    <el-select
      @visible-change="selectClose"
      v-model="modelValueLabel"
      :filter-method="selectFilterMethod"
      style="min-width: 180px;"
      :size="size"
      :placeholder="placeholderText"
      :filterable="isFilter"
      :collapse-tags="isTag"
      @change="selectChangeMethod">
      <el-option :value="modelValue" style="height: auto;padding: 0;">
        <el-tree
          :data="treeData"
          :default-expand-all="isDefaultAll"
          :expand-on-click-node="true"
          :filter-node-method="filterNode"
          :show-checkbox="false"
          :check-strictly="true"
          node-key="id"
          ref="demoTree"
          highlight-current
          :props="defaultProps"
          @node-click="handleCheckChange">
        </el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    // echoObj 可以用於回顯，它的值為需要回顯的對象，多個時可以使用數組
    echoObj: {},
    // 是否開啟搜索
    isFilter: {
      default: true
    },
    // 尺寸
    size: {
      default: 'mini'
    },
    placeholderText: {
      default: '請選擇...'
    },
    isTag: {
      default: true
    },
    isDefaultAll: {
      default: true
    },
    // 點擊節點是否展開
    expandClickNode: {
      default: false
    },
    // 字段key，用於取出數據中的名字
    fieldName: {
      default: ''
    },
    // 字段key， 數據中的id
    fieldId: {
      default: ''
    },
    // 數據
    treeData: {
      default: [{
        id: 1,
        label: '一級 1',
        children: [{
          id: 4,
          label: '二級 1-1',
          children: [{
            id: 9,
            label: '三級 1-1-1'
          }, {
            id: 10,
            label: '三級 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一級 2',
        children: [{
          id: 5,
          label: '二級 2-1'
        }, {
          id: 6,
          label: '二級 2-2'
        }]
      }, {
        id: 3,
        label: '一級 3',
        children: [{
          id: 7,
          label: '二級 3-1'
        }, {
          id: 8,
          label: '二級 3-2'
        }]
      }]
    },
    // 遍歷時字段格式化
    defaultProps: {
      default: {
        children: 'children',
        label: 'label'
      }
    },
    // 是否單選
    isSingleChoice: {
      default: true
    }
  },
  data () {
    return {
      // 實際選中值
      modelValue: [],
      // 下拉框綁定值(選中值名字)
      modelValueLabel: []
    }
  },
  mounted () {
    if (this.echoObj) {
      if (this.echoObj.length > 0) {
        var ids = []
        var names = []
        for (let i = 0; i < this.echoObj.length; i++) {
          ids.push(JSON.parse('this.echoObj[i].' + this.fieldId))
          names.push(JSON.parse('this.echoObj[i].' + this.fieldName))
          this.modelValue.push(this.echoObj[i])
        }
        this.modelValueLabel = names
        this.$nextTick(() => {
          this.$refs.demoTree.setCheckedKeys(ids)
        })
      }
    }
  },
  methods: {
    selectClose (bool) {
      if (bool) {
        this.selectFilterMethod('')
      }
    },
    selectFilterMethod (val) {
      // 下拉框調用tree樹篩選
      this.$refs.demoTree.filter(val)
    },
    selectChangeMethod (e) {
      var arrNew = []
      var dataLength = this.modelValue.length
      var eLength = e.length
      for (var i = 0; i < dataLength; i++) {
        for (var j = 0; j < eLength; j++) {
          if (e[j] === JSON.parse('this.modelValue[i].' + this.fieldName)) {
            arrNew.push(this.modelValue[i])
          }
        }
      }
      // 設置勾選的值
      this.$refs.demoTree.setCheckedNodes(arrNew)
    },
    filterNode (value, data) {
      if (!value) return true
      // JSON.parse('data.' + this.fieldName)
      return JSON.parse('data.' + this.fieldName).indexOf(value) !== -1
    },
    handleCheckChange (data, node) {
      if (this.isSingleChoice) {
        this.$refs.demoTree.setCheckedNodes([data])
        this.modelValueLabel = data.label
      }
      // 這里兩個true，1. 是否只是葉子節點 2. 是否包含半選節點（就是使得選擇的時候不包含父節點
      var arrLabel = []
      var arr = []
      this.modelValue = arr.push(data.id)
      this.modelValueLabel = arrLabel.push(data.label)
      if (this.isSingleChoice) {
        if (arr.length === 1) {
          this.$emit('callBackFunc', arr)
        }
      } else {
        this.$emit('callBackFunc', arr)
      }
    }
  }
}
</script>

<style lang="" scoped>

</style>