bug 78523

2023-11-20 13:42:33 +08:00
parent 559c0d9dee
commit 813fd009a6
6 changed files with 121 additions and 49 deletions
@@ -0,0 +1,95 @@
+<template>
+  <a-tree-select
+    v-bind="$attrs"
+    v-on="$listeners"
+    :value="treeValue"
+    :getPopupContainer="(node) => node.parentNode"
+    style="width: 100%"
+    :tree-checkable="treeCheckable"
+    :show-search="canSearch"
+    :search-value.sync="searchValue"
+    :filterTreeNode="filterTreeOption"
+    @change="handleChange"
+    @search="handleSearch">
+
+  </a-tree-select>
+</template>
+
+<script>
+export default {
+  name: 'STreeSelect',
+  props: {
+    value: {
+      required: false
+    },
+    // 是否可以搜索
+    canSearch: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 是否多选
+    treeCheckable: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  watch: {
+    value: {
+      handler () {
+        if (this.value) {
+          this.treeValue = JSON.parse(JSON.stringify(this.value))
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  data () {
+    return {
+      treeValue: null, // 选中的数据
+      searchValue: null // 查询的字符串
+    }
+  },
+  mounted () {
+    if (this.treeCheckable) {
+      this.$nextTick(() => {
+        document.addEventListener('click', this.clearSearchValue)
+      })
+    }
+  },
+  methods: {
+    filterTreeOption (input, option) {
+      const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
+      return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    handleChange (value) {
+      this.treeValue = value
+      this.$emit('change', value)
+    },
+    handleSearch (value) {
+      this.searchValue = value
+    },
+    clearSearchValue (event) {
+      event.stopPropagation()
+      this.searchValue = null
+    }
+  },
+  beforeDestroy () {
+    if (this.treeCheckable) {
+      document.removeEventListener('click', this.clearSearchValue)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .ant-select-tree-dropdown {
+  max-height: 50vh !important;
+}
+</style>