前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >城市地级联选择

城市地级联选择

作者头像
itclanCoder
发布2021-12-06 16:07:28
2.3K0
发布2021-12-06 16:07:28
举报
文章被收录于专栏:itclanCoderitclanCoder

城市地级联选择

背景

在做一些后台管理系统,涉及到地区投放等时,城市级联选择器是一个很常见的需求

实例效果

点击文末左下方阅读原文即可体验

具体实例代码

代码语言: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: "克拉玛依",
            },
          ],
        },
      ],
    },
  ];

总结

主要是要符合这个数据结构,需要进行二次处理,可以是一级,二级,三级,四级,甚至五级,如有不明白的,可以交流

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-12-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 itclanCoder 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 城市地级联选择
  • 背景
  • 实例效果
  • 具体实例代码
  • 城市级联选择对应的代码
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档