96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<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 (typeof this.value !== 'string' && this.value) {
|
|
this.treeValue = JSON.parse(JSON.stringify(this.value))
|
|
} else {
|
|
this.treeValue = this.value
|
|
}
|
|
},
|
|
immediate: 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> |