城市地级联选择
背景
在做一些后台管理系统,涉及到地区投放等时,城市级联选择器是一个很常见的需求
实例效果
点击文末左下方阅读原文即可体验
具体实例代码
代码语言：javascript复制<template>
<div class="area-wrap">
<el-button
size="small"
type="default"
@click="handleSelectArea"
class="select-area-btn"
>
选择投放地区
</el-button>
<div class="area-list" v-if="forms.areaData.length">
<el-button
size="small"
@click="handleSelectItem(index)"
v-for="(item, index) in forms.areaData"
:key="index"
type="primary"
>{{ item }}<i class="el-icon-close el-icon--right"></i>
</el-button>
</div>
<!-- 投放地区模态框开始 -->
<el-dialog :visible.sync="dialogAreaVisible">
<div>
<p>已选地区</p>
</div>
<div class="dialog-selected-area">
<el-button
@click="handleDeleteBtn(item, index)"
size="mini"
class="select-btn"
v-show="item"
type="primary"
v-for="(item, index) in selectedTexts"
:key="index"
>
{{ item }}<i class="el-icon-close el-icon--right"></i>
</el-button>
</div>
<div>
<el-cascader
size="small"
:options="options"
:props="{ multiple: true, checkStrictly: true }"
@change="handleSelectChange"
clearable
separator="/"
>
</el-cascader>
</div>
<div slot="footer" align="center" class="dialog-footer">
<el-button @click="dialogAreaVisible = false">取 消</el-button>
<el-button type="primary" @click="handleDiaLogSelect">确 定</el-button>
</div>
</el-dialog>
<!-- 投放地区模态框结束 -->
</div>
</template>
<script>
import { cityData } from "./cityData.js";
export default {
name: 'cityChose',
data() {
return {
dialogAreaVisible: false, // 点击选择投放地区,弹框
options: cityData, // 投放地区-城市选择地区数据
selectedTexts: [], // 投放地区-模态框内已选地区-回显部分
forms: {
areaData: [],// 投放地区,此处展示部分
areas: "" // 最终需要将回显地内容,拼接成字符串传给后端
}
}
},
methods: {
// 选择投放地区
handleSelectChange(item) {
console.log(item);
const _that = this;
item.forEach(function (item) {
item.forEach(function (i) {
console.log(i);
_that.selectedTexts.push(i);
_that.selectedTexts = Array.from(new Set(_that.selectedTexts));
});
});
},
// 已选地区删除
handleDeleteBtn(item, index) {
console.log(item, index);
this.selectedTexts.splice(index, 1);
},
// 选择投放地区
handleSelectArea(value) {
console.log("选择投放地区");
console.log(value);
this.dialogAreaVisible = true;
this.selectedTexts = [];
},
// 投放地区,删除
handleSelectItem(index) {
this.forms.areaData.splice(index, 1);
},
// 选择投放地区弹框,确定
handleDiaLogSelect() {
this.forms.areaData = JSON.parse(JSON.stringify(this.selectedTexts));
console.log(this.forms.areaData);
this.forms.areas = this.forms.areaData.join(",");
console.log(this.forms.areas);
this.dialogAreaVisible = false;
},
}
}
</script>
<style lang="scss" scoped>
.area-wrap {
display: flex;
}
.select-area-btn {
margin-right: 10px;
}
.select-area-btn,.area-list {
margin-top: 20px;
}
.dialog-selected-area {
margin: 10px 0 10px 0;
}
</style>
城市级联选择对应的代码
代码语言：javascript复制export const cityData = [
{
value: "全部",
label: '全部',
},
{
value: "福建",
label: "福建",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "福州",
label: "福州",
children: [
{
value: "鼓楼区",
label: "鼓楼区",
},
{
value: "台江区",
label: "台江区",
},
{
value: "马尾区",
label: "马尾区"
},
{
value: "台江区",
label: "台江区"
},
{
value: "晋安区",
label: "晋安区"
},
{
value: "长乐市",
label: "长乐市"
},
{
value: "闽侯县",
label: "闽侯县"
},
{
value: "闽清县",
label: "闽清县"
},
{
value: "连江县",
label: "连江县"
},
{
value: "罗源县",
label: "罗源县"
},
{
value: "永泰县",
label: "永泰县"
},
]
},
{
value: "厦门",
label: "厦门",
},
],
},
{
value: "二线",
label: "二线",
children: [
{
value: "泉州",
label: "泉州",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "漳州",
label: "漳州",
},
{
value: "龙岩",
label: "龙岩",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "南平",
label: "南平",
},
{
value: "三明",
label: "三明",
},
{
value: "宁德",
label: "宁德",
},
{
value: "莆田",
label: "莆田",
},
],
},
],
},
{
value: "广东",
label: "广东",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "广州",
label: "广州",
},
{
value: "深圳",
label: "深圳",
},
],
},
{
value: "二线",
label: "二线",
children: [
{
value: "佛山",
label: "佛山",
},
{
value: "中山",
label: "中山",
},
{
value: "惠州",
label: "惠州",
},
{
value: "珠海",
label: "珠海",
},
{
value: "东莞",
label: "东莞",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "江门",
label: "江门",
},
{
value: "肇庆",
label: "肇庆",
},
{
value: "潮州",
label: "潮州",
},
{
value: "汕头",
label: "汕头",
},
{
value: "揭阳",
label: "揭阳",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "阳江",
label: "阳江",
},
{
value: "湛江",
label: "湛江",
},
{
value: "茂名",
label: "茂名",
},
{
value: "清远",
label: "清远",
},
{
value: "梅州",
label: "梅州",
},
{
value: "韶关",
label: "韶关",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "云浮",
label: "云浮",
},
{
value: "河源",
label: "河源",
},
{
value: "汕尾",
label: "汕尾",
},
],
},
],
},
{
value: "北京",
label: "北京",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "北京",
label: "北京",
},
],
},
],
},
{
value: "内蒙古",
label: "内蒙古",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "包头",
label: "包头",
},
{
value: "呼和浩特",
label: "呼和浩特",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "鄂尔多斯",
label: "鄂尔多斯",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "乌海",
label: "乌海",
},
{
value: "赤峰",
label: "赤峰",
},
{
value: "通辽",
label: "通辽",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "乌兰察布",
label: "乌兰察布",
},
{
value: "巴彦淖尔",
label: "巴彦淖尔",
},
{
value: "呼伦贝尔",
label: "呼伦贝尔",
},
],
},
],
},
{
value: "贵州",
label: "贵州",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "贵阳",
label: "贵阳",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "遵义",
label: "遵义",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "黔南",
label: "黔南",
},
{
value: "安顺",
label: "安顺",
},
{
value: "毕节",
label: "毕节",
},
{
value: "六盘水",
label: "六盘水",
},
{
value: "黔西南",
label: "黔西南",
},
{
value: "黔东南",
label: "黔东南",
},
{
value: "铜仁",
label: "铜仁",
},
],
},
],
},
{
value: "宁夏",
label: "宁夏",
children: [
{
value: "三线",
label: "三线",
children: [
{
value: "银川",
label: "银川",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "石嘴山",
label: "石嘴山",
},
{
value: "吴忠",
label: "吴忠",
},
],
},
],
},
{
value: "江苏",
label: "江苏",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "南京",
label: "南京",
},
{
value: "无锡",
label: "无锡",
},
],
},
{
value: "二线",
label: "二线",
children: [
{
value: "常州",
label: "常州",
},
{
value: "苏州",
label: "苏州",
},
{
value: "徐州",
label: "徐州",
},
{
value: "南通",
label: "南通",
},
{
value: "扬州",
label: "扬州",
},
{
value: "镇江",
label: "镇江",
},
{
value: "淮安",
label: "淮安",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "泰州",
label: "泰州",
},
{
value: "盐城",
label: "盐城",
},
{
value: "连云港",
label: "连云港",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "宿迁",
label: "宿迁",
},
],
},
],
},
{
value: "安徽",
label: "安徽",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "合肥",
label: "合肥",
},
{
value: "",
label: "",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "安庆",
label: "安庆",
},
{
value: "芜湖",
label: "芜湖",
},
{
value: "马鞍山",
label: "马鞍山",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "滁州",
label: "滁州",
},
{
value: "淮南",
label: "淮南",
},
{
value: "黄山",
label: "黄山",
},
{
value: "蚌埠",
label: "蚌埠",
},
{
value: "阜阳",
label: "阜阳",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "亳州",
label: "亳州",
},
{
value: "六安",
label: "六安",
},
{
value: "宿州",
label: "宿州",
},
{
value: "铜陵",
label: "铜陵",
},
{
value: "淮北",
label: "淮北",
},
{
value: "池州",
label: "池州",
},
],
},
],
},
{
value: "山东",
label: "山东",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "济南",
label: "济南",
},
{
value: "青岛",
label: "青岛",
},
],
},
{
value: "二线",
label: "二线",
children: [
{
value: "潍坊",
label: "潍坊",
},
{
value: "烟台",
label: "烟台",
},
{
value: "临沂",
label: "临沂",
},
{
value: "威海",
label: "威海",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "淄博",
label: "淄博",
},
{
value: "聊城",
label: "聊城",
},
{
value: "济宁",
label: "济宁",
},
{
value: "泰安",
label: "泰安",
},
{
value: "东营",
label: "东营",
},
{
value: "滨州",
label: "滨州",
},
{
value: "日照",
label: "日照",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "德州",
label: "德州",
},
{
value: "枣庄",
label: "枣庄",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "莱芜",
label: "莱芜",
},
{
value: "菏泽",
label: "菏泽",
},
],
},
],
},
{
value: "黑龙江",
label: "黑龙江",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "哈尔滨",
label: "哈尔滨",
},
{
value: "大庆",
label: "大庆",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "牡丹江",
label: "牡丹江",
},
{
value: "齐齐哈尔",
label: "齐齐哈尔",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "鹤岗",
label: "鹤岗",
},
{
value: "绥化",
label: "绥化",
},
{
value: "双鸭山",
label: "双鸭山",
},
{
value: "鸡西",
label: "鸡西",
},
{
value: "佳木斯",
label: "佳木斯",
},
{
value: "黑河",
label: "黑河",
},
{
value: "七台河",
label: "七台河",
},
],
},
],
},
{
value: "山西",
label: "山西",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "太原",
label: "太原",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "大同",
label: "大同",
},
{
value: "长治",
label: "长治",
},
{
value: "运城",
label: "运城",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "晋中",
label: "晋中",
},
{
value: "临汾",
label: "临汾",
},
{
value: "晋城",
label: "晋城",
},
{
value: "阳泉",
label: "阳泉",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "忻州",
label: "忻州",
},
{
value: "朔州",
label: "朔州",
},
{
value: "吕梁",
label: "吕梁",
},
],
},
],
},
{
value: "陕西",
label: "陕西",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "西安",
label: "西安",
},
],
},
{
value: "二线",
label: "二线",
children: [
{
value: "咸阳",
label: "咸阳",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "榆林",
label: "榆林",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "渭南",
label: "渭南",
},
{
value: "宝鸡",
label: "宝鸡",
},
{
value: "延安",
label: "延安",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "汉中",
label: "汉中",
},
{
value: "商洛",
label: "商洛",
},
{
value: "安康",
label: "安康",
},
{
value: "铜川",
label: "铜川",
},
],
},
],
},
{
value: "广西",
label: "广西",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "南宁",
label: "南宁",
},
{
value: "桂林",
label: "桂林",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "柳州",
label: "柳州",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "玉林",
label: "玉林",
},
{
value: "贵港",
label: "贵港",
},
{
value: "河池",
label: "河池",
},
{
value: "百色",
label: "百色",
},
{
value: "梧州",
label: "梧州",
},
{
value: "钦州",
label: "钦州",
},
],
},
],
},
{
value: "河南",
label: "河南",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "郑州",
label: "郑州",
},
{
value: "洛阳",
label: "洛阳",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "平顶山",
label: "平顶山",
},
{
value: "新乡",
label: "新乡",
},
{
value: "南阳",
label: "南阳",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "安阳",
label: "安阳",
},
{
value: "焦作",
label: "焦作",
},
{
value: "许昌",
label: "许昌",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "周口",
label: "周口",
},
{
value: "开封",
label: "开封",
},
{
value: "濮阳",
label: "濮阳",
},
{
value: "三门峡",
label: "三门峡",
},
{
value: "商丘",
label: "商丘",
},
{
value: "信阳",
label: "信阳",
},
{
value: "鹤壁",
label: "鹤壁",
},
{
value: "漯河",
label: "漯河",
},
{
value: "驻马店",
label: "驻马店",
},
{
value: "济源",
label: "济源",
},
],
},
],
},
{
value: "上海",
label: "上海",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "上海",
label: "上海",
},
],
},
],
},
{
value: "重庆",
label: "重庆",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "重庆",
label: "重庆",
},
],
},
],
},
{
value: "四川",
label: "四川",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "成都",
label: "成都",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "绵阳",
label: "绵阳",
},
{
value: "德阳",
label: "德阳",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "泸州",
label: "泸州",
},
{
value: "南充",
label: "南充",
},
{
value: "宜宾",
label: "宜宾",
},
{
value: "内江",
label: "内江",
},
{
value: "乐山",
label: "乐山",
},
{
value: "攀枝花",
label: "攀枝花",
},
{
value: "眉山",
label: "眉山",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "广元",
label: "广元",
},
{
value: "广安",
label: "广安",
},
{
value: "凉山",
label: "凉山",
},
{
value: "自贡",
label: "自贡",
},
{
value: "雅安",
label: "雅安",
},
],
},
],
},
{
value: "辽宁",
label: "辽宁",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "大连",
label: "大连",
},
{
value: "沈阳",
label: "沈阳",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "营口",
label: "营口",
},
{
value: "锦州",
label: "锦州",
},
{
value: "鞍山",
label: "鞍山",
},
{
value: "丹东",
label: "丹东",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "葫芦岛",
label: "葫芦岛",
},
{
value: "抚顺",
label: "抚顺",
},
{
value: "辽阳",
label: "辽阳",
},
{
value: "盘锦",
label: "盘锦",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "朝阳",
label: "朝阳",
},
{
value: "阜新",
label: "阜新",
},
{
value: "铁岭",
label: "铁岭",
},
{
value: "本溪",
label: "本溪",
},
],
},
],
},
{
value: "云南",
label: "云南",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "昆明",
label: "昆明",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "曲靖",
label: "曲靖",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "临沧",
label: "临沧",
},
{
value: "保山",
label: "保山",
},
{
value: "大理",
label: "大理",
},
{
value: "玉溪",
label: "玉溪",
},
{
value: "楚雄",
label: "楚雄",
},
{
value: "红河",
label: "红河",
},
{
value: "昭通",
label: "昭通",
},
{
value: "文山",
label: "文山",
},
],
},
],
},
{
value: "湖北",
label: "湖北",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "武汉",
label: "武汉",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "宜昌",
label: "宜昌",
},
{
value: "襄樊",
label: "襄樊",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "荆州",
label: "荆州",
},
{
value: "孝感",
label: "孝感",
},
{
value: "黄石",
label: "黄石",
},
{
value: "荆门",
label: "荆门",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "黄冈",
label: "黄冈",
},
{
value: "咸宁",
label: "咸宁",
},
{
value: "恩施",
label: "恩施",
},
{
value: "十堰",
label: "十堰",
},
{
value: "鄂州",
label: "鄂州",
},
{
value: "天门",
label: "天门",
},
{
value: "潜江",
label: "潜江",
},
{
value: "仙桃",
label: "仙桃",
},
{
value: "随州",
label: "随州",
},
],
},
],
},
{
value: "西藏",
label: "西藏",
children: [
{
value: "四线",
label: "四线",
children: [
{
value: "拉萨",
label: "拉萨",
},
],
},
],
},
{
value: "天津",
label: "天津",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "天津",
label: "天津",
},
],
},
],
},
{
value: "河北",
label: "河北",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "石家庄",
label: "石家庄",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "邯郸",
label: "邯郸",
},
{
value: "保定",
label: "保定",
},
{
value: "邢台",
label: "邢台",
},
{
value: "廊坊",
label: "廊坊",
},
{
value: "唐山",
label: "唐山",
},
{
value: "沧州",
label: "沧州",
},
{
value: "秦皇岛",
label: "秦皇岛",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "张家口",
label: "张家口",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "衡水",
label: "衡水",
},
{
value: "承德",
label: "承德",
},
],
},
],
},
{
value: "甘肃",
label: "甘肃",
children: [
{
value: "三线",
label: "三线",
children: [
{
value: "兰州",
label: "兰州",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "天水",
label: "天水",
},
{
value: "白银",
label: "白银",
},
{
value: "平凉",
label: "平凉",
},
{
value: "武威",
label: "武威",
},
{
value: "酒泉",
label: "酒泉",
},
{
value: "庆阳",
label: "庆阳",
},
{
value: "张掖",
label: "张掖",
},
],
},
],
},
{
value: "海南",
label: "海南",
children: [
{
value: "三线",
label: "三线",
children: [
{
value: "海口",
label: "海口",
},
{
value: "三亚",
label: "三亚",
},
],
},
],
},
{
value: "浙江",
label: "浙江",
children: [
{
value: "一线",
label: "一线",
children: [
{
value: "杭州",
label: "杭州",
},
],
},
{
value: "二线",
label: "二线",
children: [
{
value: "宁波",
label: "宁波",
},
{
value: "嘉兴",
label: "嘉兴",
},
{
value: "温州",
label: "温州",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "台州",
label: "台州",
},
{
value: "绍兴",
label: "绍兴",
},
{
value: "金华",
label: "金华",
},
{
value: "舟山",
label: "舟山",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "丽水",
label: "丽水",
},
{
value: "衢州",
label: "衢州",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "湖州",
label: "湖州",
},
],
},
],
},
{
value: "吉林",
label: "吉林",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "长春",
label: "长春",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "吉林",
label: "吉林",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "延边",
label: "延边",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "辽源",
label: "辽源",
},
{
value: "四平",
label: "四平",
},
{
value: "白城",
label: "白城",
},
{
value: "通化",
label: "通化",
},
{
value: "白山",
label: "白山",
},
],
},
],
},
{
value: "江西",
label: "江西",
children: [
{
value: "二线",
label: "二线",
children: [
{
value: "南昌市",
label: "南昌市",
},
],
},
{
value: "三线",
label: "三线",
children: [
{
value: "九江",
label: "九江",
},
{
value: "赣州",
label: "赣州",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "景德镇",
label: "景德镇",
},
{
value: "吉安",
label: "吉安",
},
{
value: "上饶",
label: "上饶",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "萍乡",
label: "萍乡",
},
{
value: "新余",
label: "新余",
},
{
value: "宜春",
label: "宜春",
},
{
value: "鹰潭",
label: "鹰潭",
},
{
value: "抚州",
label: "抚州",
},
],
},
],
},
{
value: "湖南",
label: "湖南",
children: [
{
value: "三线",
label: "三线",
children: [
{
value: "长沙",
label: "长沙",
},
{
value: "衡阳",
label: "衡阳",
},
{
value: "郴州",
label: "郴州",
},
{
value: "株洲",
label: "株洲",
},
{
value: "岳阳",
label: "岳阳",
},
{
value: "湘潭",
label: "湘潭",
},
],
},
{
value: "四线",
label: "四线",
children: [
{
value: "娄底",
label: "娄底",
},
{
value: "邵阳",
label: "邵阳",
},
{
value: "常德",
label: "常德",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "怀化",
label: "怀化",
},
{
value: "永州",
label: "永州",
},
{
value: "益阳",
label: "益阳",
},
{
value: "湘西",
label: "湘西",
},
{
value: "张家界",
label: "张家界",
},
],
},
],
},
{
value: "青海",
label: "青海",
children: [
{
value: "三线",
label: "三线",
children: [
{
value: "西宁",
label: "西宁",
},
],
},
],
},
{
value: "新疆",
label: "新疆",
children: [
{
value: "三线",
label: "三线",
children: [
{
value: "乌鲁木齐",
label: "乌鲁木齐",
},
],
},
{
value: "五线",
label: "五线",
children: [
{
value: "昌吉",
label: "昌吉",
},
{
value: "伊犁",
label: "伊犁",
},
{
value: "阿克苏",
label: "阿克苏",
},
{
value: "克拉玛依",
label: "克拉玛依",
},
],
},
],
},
];
总结
主要是要符合这个数据结构,需要进行二次处理,可以是一级,二级,三级,四级,甚至五级,如有不明白的,可以交流
