这个博客展示了如何使用Vue.js创建一个地区选择器组件。组件利用了el-cascader组件，通过pinyin-match库进行筛选，并提供了获取选定地区标签值的功能。在组件中，还定义了数据绑定、属性设置、事件监听等关键功能，以实现可配置的多级地区选择和筛选操作。
<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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
