<template>
<div>
<el-cascader
ref="areaNames"
v-model="disValue"
:options="districtAll"
:props="{
label: 'treedataname',
value: 'treedataid',
children: 'childList'
}"
:collapse-tags="collapseTags"
clearable
:style="{width: typeof width === 'number' ? `${width}px` : width}"
filterable
:disabled="disabled"
:filter-method="filterMethod"
@change="handleChange"
/>
</div>
</template>
<script>
import { districtAll } from '@/base/utils/district'
import pinyinMatch from 'pinyin-match'
export default {
name: 'DistrictPicker',
props: {
value: {
type: [String, Array, Number],
default: _ => []
},
width: {
type: [Number, String],
default: 280
},
// 多選
multiple: {
type: Boolean,
default: false
},
// 是否嚴格的遵守父子節點不互相關聯
checkStrictly: {
type: Boolean,
default: false
},
// 是否折疊
collapseTags: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
districtAll: districtAll,
areaNames: ''
}
},
computed: {
disValue: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
},
created() {
this.$emit('areaInfo', districtAll)
},
methods: {
//過濾
filterMethod(node, keyword) {
return pinyinMatch.match(node.text, keyword)
},
handleChange(val) {
this.$emit('change', val)
this.$nextTick(() => {
this.areaNames = this.$refs['areaNames'].presentText //獲取lable的值
})
}
}
}
</script>
<style scoped>
</style>