Vue+ElementUI Cascader级联选择器省市区修改回显

最新推荐文章于 2024-08-16 09:48:11 发布

大西瓜去不去皮

最新推荐文章于 2024-08-16 09:48:11 发布

阅读量2.2k

点赞数

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/qq_50988305/article/details/120894052

版权

本文介绍了如何在Vue项目中使用ElementUI的Cascader组件实现省市区三级联动，并详细讲解了在新增和修改操作中如何回显已选择的城市数据。首先，通过安装element-china-area-data获取地区数据，然后在Vue文件中引入并展示。接着，展示了模板中的新增和修改组件结构，以及Data中返回的regionData数据。此外，还提供了选择时的事件处理和修改时回显城市的实现方法。

摘要由CSDN通过智能技术生成

一、安装 element-china-area-data

npm install element-china-area-data -S

二、在vue文件中引入

import { regionData, CodeToText, TextToCode } from "element-china-area-data";

三、<template>里面的部分

新增

<el-form-item
   label="城市："
   :label-width="formLabelWidth"
   prop="CITY">
       <el-cascader
            style="width: 230px"
            size="medium"
            :options="options"
             v-model="addForm.CITY"
             @change="handleChange" >
       </el-cascader>
</el-form-item>

修改

<el-form-item
    label="城市："
    :label-width="formLabelWidth"
    prop="CITY">
        <el-cascader
            style="width: 230px"
            size="medium"