弹框下拉树组件

<template>
  <div class="selectTree-input" v-if="update">
    <el-popover popper-class="selectTree" placement="bottom-start" 
    transition="fade-in-linear" v-model="visible" width="319" 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" :readonly="readonly" 
      :placeholder="placeholder" :disabled="disabled" slot="reference" :suffix-icon="icon">
          <i slot="suffix" v-show="filterText" @click="clear" class="el-icon-circle-close"></i>
      </el-input>
    </el-popover>
  </div>
</template>
<script>
import { getDepartment } from '@/api/systemManager/userMng'
export default {
  name: 'selectTree',
  props: {
    value: String,
    data: Array,
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      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 {
            this.filterText = ''
          }
        }
      }
    },
    visible(val) {
      if (val === true) {
        this.icon = "el-icon-arrow-up el-circle-close el-input_clear"
      } else {
        this.icon = "el-icon-arrow-down el-circle-close el-input_clear"
      }
    },
    filterable(val) {
      this.update = false
      this.setFilter(this.data)
      this.$nextTick(() => {
        this.update = true
      })
    }
  },
  methods: {
    setFilterText() {
      if (!this.value) {
        this.filterText = ''
        return
      } else {
        this.$refs.tree1.setCurrentKey(this.value)
        let obj = this.$refs.tree1.getCurrentNode()
        if (obj) {
          this.filterText = obj[this.defaultProps.label]
        } else {
          this.filterText = ''
        }
      }
    },
    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(null)
      this.$emit('input',null)
    }
  },
  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;
    }
  }
}
.selectTree-input .el-input .el-input__inner {
  cursor: pointer;
}
.selectTree-input .el-icon-circle-close{
  cursor: pointer;
}
</style>

• 点赞
• 收藏
• 分享
• • 文章举报

辰逸Nicholas 发布了43 篇原创文章 · 获赞 0 · 访问量 3662 私信 关注

标签：el,obj,拉树,item,组件,input,框下,true,children
来源： https://blog.csdn.net/qq_32615575/article/details/104611819