vue + elementUI 实现下拉树形结构选择部门，支持多选，支持检索-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue + elementUI 实现下拉树形结构选择部门，支持多选，支持检索。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
  <div>
    <el-select v-model="multiple?choosedValue:choosedValue[0]" element-loading-background="rgba(0,0,0,0.8)"
               :disabled="disableFlag" @visible-change="visibleChange"
               filterable clearable collapse-tags :filter-method="filterMethod" @clear="clear" @remove-tag="removeTag"
               :multiple="multiple" ref="selectRef" v-loading="loading" style="width: 100%">
      <el-option :label="option.name" :value="option.id" v-for="option in options" :key="option.id"
                 class="optionClass"/>
      <template v-slot:empty>
        <div/>
      </template>
      <el-tree :props="treeProps" :load="loadNode" :data="treeData" :show-checkbox="multiple" @check="handleCheck"
               :expand-on-click-node="false" @node-click="chooseNode" :filter-node-method="filterNodeMethod"
               class="treeClass" ref="treeRef" :node-key="'id'" :default-checked-keys="choosedValue"/>
    </el-select>
  </div>
</template>

<script>
import {getDwxxOfTree} from "@/api/commentTable/api";

export default {
  name: "chooseUnitTree",
  props: {
    disableFlag: {
      Type: Boolean,
      required: false,
      default: false
    },
    value: {
      Type: Object,
      required: true
    },
    multiple: {
      Type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      treeProps: {
        label: 'name',
        value: 'id',
        children: 'children'
      },
      deptMap: {},
      treeData: [],
      options: [],
      loading: false,
      choosedValue: [],
      choosedOptions: [],
    }
  },
  computed: {},
  watch: {
    // choosedValue: {
    //   handler(n, o) {
    //     if (this.$refs.treeRef) {
    //       this.$refs.treeRef.filter()
    //     }
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  mounted() {
    this.choosedValue = []
    this.getNodeData()
  },
  methods: {
    visibleChange(visible) {
      if (!visible) {
        this.$refs.treeRef.filter()
      }
    },
    removeTag(nodeId) {
      this.choosedValue = this.choosedValue.filter(item => item !== nodeId)
      this.choosedOptions = this.choosedOptions.filter(item => item.id !== nodeId)
      this.$refs.treeRef.setCheckedKeys(this.choosedValue, false)
      this.$emit('input', this.multiple ? this.choosedValue : this.choosedValue[0])
    },
    clear() {
      this.choosedValue = []
      this.choosedOptions = []
      this.$refs.treeRef.setCheckedKeys([], false)
      this.$emit('input', '')
    },
    filterMethod(keyWord) {
      this.$refs.treeRef.filter(keyWord)
    },
    filterNodeMethod(keyWord, node) {
      if (!keyWord) {
        return true
      }
      return (node.name + node.id).includes(keyWord)
    },
    init() {
      this.choosedValue = []
      if (typeof this.value === 'string') {
        this.choosedOptions.push(this.deptMap[this.value])
        this.choosedValue.push(this.value)
      } else {
        this.value.forEach(item => {
          this.choosedOptions.push(this.deptMap[item.id])
          this.choosedValue = this.value
        })
      }
    },
    getNodeData(resolve) {
      this.loading = true
      getDwxxOfTree().then(dwxxResult => {
        // dwxxResult.data :
        // [{
        //   id  : "123456"
        //   name : "xx集团"
        //   pid : "000000"
        // }]
        this.loading = false
        if (dwxxResult.data) {
          this.options = dwxxResult.data
          const rootDept = []
          this.deptMap = {}
          for (let deptInfo of dwxxResult.data) {
            this.deptMap[deptInfo.id] = deptInfo
          }
          for (let deptInfo of dwxxResult.data) {
            if (!this.deptMap[deptInfo.pid]) {
              rootDept.push(deptInfo)
            }
          }
          if (resolve) {
            resolve(rootDept)
          }
        } else {
          if (resolve) {
            resolve([])
          }
        }
        this.init()
        this.createTree(dwxxResult.data)
      })
    },
    createNodeChildren(node) {
      let children = []
      for (let deptId in this.deptMap) {
        let tmpNode = this.deptMap[deptId]
        if (tmpNode.pid === node.id) {
          children.push(this.createNodeChildren(tmpNode))
        }
      }
      node.children = children
      return node
    },
    createTree() {
      this.treeData = []
      for (let deptId in this.deptMap) {
        let node = this.deptMap[deptId]
        if (!this.deptMap[node.pid]) {
          this.treeData.push(this.createNodeChildren(node))
        }
      }
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getNodeData(resolve)
      } else {
        const children = []
        for (let deptId in this.deptMap) {
          if (this.deptMap[deptId].pid === node.data.id) {
            children.push(this.deptMap[deptId])
          }
          resolve(children)
        }
      }
    },
    handleCheck(data, currentData) {
      this.choosedOptions = this.multiple ? [data] : currentData.checkedNodes // this.$refs.treeRef.getCheckedNodes(false, false)
      if (this.choosedOptions.length > 0) {
        const tempMap = {}
        this.choosedOptions.forEach(op => {
          tempMap[op.id] = op
        })
        let tmpOps = []
        this.choosedOptions.forEach(op => {
          if (!tempMap[op.pid]) {
            tmpOps.push(op)
          }
        })
        this.choosedOptions = tmpOps
        this.choosedValue = this.choosedOptions.map(item => item.id)
      } else {
        this.choosedValue = []
      }
      this.$emit('input', this.multiple ? this.choosedValue : this.choosedValue[0])
    },
    chooseNode(data) {
      this.choosedOptions = [data]
      this.choosedValue = [data.id]
      this.$emit('input', data.id)
      this.$refs.selectRef.visible = false
    }
  }
}
</script>

<style scoped lang="scss">
.optionClass {
  display: none;
}

.treeClass {
  background: transparent;
  margin: 10px;
}
</style>