vue+elementUI实现省市区三级联动

最新推荐文章于 2022-09-21 17:49:21 发布

红颜い笑倾城

最新推荐文章于 2022-09-21 17:49:21 发布

阅读量5.6k

点赞数 9

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/gp_911014/article/details/117990455

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在Vue项目中使用element-china-area-data包实现省市区级联选择器。通过安装并引入相关数据，展示了如何配置级联组件以支持搜索和清除功能，并解释了如何通过回调函数处理选中值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取elementUI的省市区级联数据

npm install element-china-area-data -S

2、引入数据

  import { regionData, CodeToText } from 'element-china-area-data'

3、在vue页面中使用

<el-col :span="12">
    <el-form-item label="目的城市" prop="destinationCity">
        <el-cascader placeholder="可搜索" :options="citys" filterable clearable @change="handleChange">
            <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
        </el-cascader>
    </el-form-item>
</el-col>

data() {
    return {
        kuaidi: {
            name: '',
            departmentName: '',
            applicationDate: this.$moment().format('YYYY-MM-DD'),
            attribute: '',
            destinationCity: '',
            addressee: '',
            consigneeAddress: '',
            expressCompany: '',
            courierNumber: '',
         },
         rules: {
            attribute: [
                { required: true, message: '请选择快递属性', trigger: 'change' }
            ],
            destinationCity: [
                { required: true, message: '请选择城市', trigger: 'change' }
            ],
            addressee: [
                { required: true, message: '请输入收件单位', trigger: 'blur' }
            ],
            consigneeAddress: [
                { required: true, message: '请输入收件地址', trigger: 'blur' }
            ],
            expressCompany: [
                { required: true, message: '请输入快递公司', trigger: 'blur' }
            ],
            courierNumber: [
                { required: true, message: '请输入快递单号', trigger: 'blur' }
            ],
         },
         attributeList: ['客户', '供应商', '其他'],
         citys: regionData,
      }
    },

handleChange(value) {
    let cityNames = []
    value.forEach(e => {
        cityNames.push(CodeToText[e])
    });
    this.kuaidi.destinationCity = cityNames.join('/')
},

其中：filterable实现可搜索；clearable实现可清除

注：由于handleChange(value)中value是区域编码，所以需要引入CodeToText[i]，将区域码转换成对应中文。

最终效果如下所示：

附录：

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
"全部"选项绑定的value是空字符串""
CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText['110000']输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105