vue-cascader中国城市三级联动

最新推荐文章于 2024-07-25 09:12:24 发布

nzstjhk

最新推荐文章于 2024-07-25 09:12:24 发布

阅读量4.1k

点赞数 2

分类专栏：小功能总结文章标签： vue vue-cascader 三级联动中国城市三级联动

本文链接：https://blog.csdn.net/weixin_42598901/article/details/96129717

版权

本文介绍如何利用Vue组件vue-cascader，结合中国城市数据，实现一个功能完善的三级联动选择器。通过引入自定义的PlaceCode.js文件，实现了从省级到市级再到区县级的无缝切换。

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

<template>
    <div>
        <el-cascader
            :options="options"
            :props="props"
            v-model="selectedOptions"
            @change="handleChange"
            @active-item-change="handleChange"
            v-bind="$attrs"
            :clearable="clearable"
            :filterable="filterable"
            :change-on-select="changeOnSelect"
            :disabled="disabled"
            :show-all-levels="showAllLevels"
        ></el-cascader>
    </div>
</template>
<script>
import PlaceCode from "@/assets/js/placeCode"
export default {
    data(){
        return{
            options: [],
            selectedOptions: [],
            keyPath: null,
            //是否可搜索选项
            filterable: false,
            //是否允许选择任意一级的选项 默认值false
            chan