城市地级联选择

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

城市地级联选择

背景

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

实例效果

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

具体实例代码

<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>

城市级联选择对应的代码

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: "阳江",