el-cascader实现省市区县地区数据的动态加载和回显

最新推荐文章于 2024-06-07 16:42:09 发布

Ambition-do it

最新推荐文章于 2024-06-07 16:42:09 发布

阅读量796

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46753476/article/details/126884630

版权

效果图：

<template>
      <el-form-item label="省市区" prop="region">
          <el-cascader
            v-model="pointOfOrigin"
            style="width: 300px"
            :options="region"
            clearable
            @change="cascaderChange"
          ></el-cascader>
       </el-form-item>
</template>

<script>
    import { regionData } from "element-china-area-data";
    export default{
        data(){
            return{
                region: regionData
            }
        },
        methods:{
            //点击编辑的时候 地区回显上去
             handleFilter(row) {
                this.formData = JSON.parse(JSON.stringify(row));
                let region = this.formData.region;
                this.pointOfOrigin = region.split(",");
                // this.pointOfOrigin=['130000', '130200', '130202']
                console.log(this.pointOfOrigin);
             },
            // 地址选择 这个是处理让自己可以选择地区
            cascaderChange(e) {
                this.formData.region = e.join(",");
            },
        }
    }
</script>