效果
源码
<template>
<el-cascader
filterable
clearable
v-model="address"
:options="options"
:props="{ expandTrigger: 'hover', value: 'code', label: 'name', ...props }"
:size="size"
:disabled="disabled"
:placeholder="placeholder"
@focus="focus"
@blur="blur"
@visible-change="visibleChange"
@input="input"
@change="change"
></el-cascader>
</template>
<script>
export default {
name: "address-cascader",
props: {
value: {
type: Array,
},
size: {
type: String,
default: "medium",
},
disabled: {
type: Boolean,
default: false,
},
props: {
type: Object,
},
placeholder: {
type: String,
default: "",
},
},
data() {
return {
address: [],
options: [],
};
},
created() {
this.getData();
},
watch: {
value(now, old) {
console.log(now);
this.address = now || [];
},
},
methods: {
getData() {
fetch(`/addrTree/address2021.json`)
.then((res) => {
return res.json();
})
.then((res) => {
this.options = res;
});
},
blur() {
this.$emit("blur");
},
focus() {
this.$emit("focus");
},
visibleChange(status) {
this.$emit("visible-change", status);
},
change(value) {
this.$emit("change", value);
},
input(value) {
this.$emit("input", value);
},
},
};
</script>
<style lang="less" scoped></style>
使用指导
<address-cascader v-model="formData.address3" />
address3 是 []
vue封装的通用五级地址联动选择器组件 [拿来即用]