城市级联
- 数据来源：外链
- 应用：
<template>
<el-form>
<el-form-item>
<el-input
placeholder="市-区 街道"
v-model="address"
readonly
@click.native="clickAddress"
/>
<van-popup v-model="show" position="bottom">
<!-- <van-area
:columns-placeholder="['请选择', '请选择', '请选择']"
:area-list="AreaList"
title="标题"
@confirm="handleConfirm"
/> -->
<van-cascader
class="component-area"
v-model="cascaderValue"
title="请选择市-区 街道"
:options="options"
:field-names="fileNames"
@close="onClose"
@finish="handleConfirm"
@change="onChange"
active-color="#2da7fd"
/>
</van-popup>
</el-form-item>
</el-form>
</template>
<script>
import AreaList from "@/data/area_format_array.js";
export default {
data() {
return {
options: [],
fileNames: { text: "n", value: "i" },
cascaderValue: null,
show: false,
};
},
created() {
this.init();
},
methods: {
onClose() {
this.show = false;
},
onChange({ selectedOptions, value, tabIndex }) {
let arr, subIndex;
let index = this.options.findIndex(
(item) => item.i === selectedOptions[0].i
);
switch (tabIndex) {
case 0:
arr = AreaList.filter((item) => item.p === value).map((item) => {
item.children = [];
return item;
});
this.options[index].children = arr;
break;
case 1:
subIndex = selectedOptions[0].children.findIndex(
(item) => item.i === value
);
arr = AreaList.filter((item) => item.p === value).map((item) => {
item.children = [];
return item;
});
this.options[index].children[subIndex].children = arr;
break;
case 2:
let subSubIndex = selectedOptions[1].children.findIndex(
(item) => item.i === value
);
subIndex = selectedOptions[0].children.findIndex(
(item) => item.i === selectedOptions[1].i
);
arr = AreaList.filter((item) => item.p === value);
this.options[index].children[subIndex].children[
subSubIndex
].children = arr;
}
},
init() {
this.options = AreaList.filter((item) => item.p === 0).map((item) => {
item.children = [];
return item;
});
},
clickAddress() {
this.show = true;
},
handleConfirm(data) {
this.address = selectedOptions.reduce((prev, curr) => prev + curr.n, "");
this.show = false;
},
}
}
</script>
- 效果图
- 涉及到的文件：
area_format_array.js
