使用Naive UI的级联选择器 Cascader进行省市区选择

序言:

在进行PC版的功能开发时,进行客户管理时老板要让客户便捷的选择自己的省市区等信息,而不是让他们一个个去填写,这时就需要使用级联选择器来进行省市区的选择。

注:element ui/plus的级联选择器也是可以的。

步骤:

  • 需要下载省市区的js文件,这个文件已经上传到主页可以自行下载,文件名称为ydui.citys.js。首先引入并声明并初始化一个变量yduiCtiys,其值来自外部的YDUI_CITYS对象,该对象预期包含所有省份及其下属城市和区县信息。:

    import * as ydui from '@/assets/js/ydui.citys';
    let yduiCtiys = YDUI_CITYS;
    
  • 1.声明一个响应式对象addressArr,用于存放最终处理好的地址选项数据,初始时options为空数组。

    2.声明并初始化了一个名为 addrs 的空数组,这个数组被用来存储处理后的地址数据,具体包括省份、城市、区县等信息。每一级(省份、城市、区县)都将以对象的形式被添加到这个数组中,并建立起父子关系。

    3.初始化和遍历省份、城市**、** 区县。整理并赋值给addressArr.options

    let addressArr = reactive({ options: [] });
    let addrs = [];
    yduiCtiys.forEach((province, pid) =>{
        let p = {};
        p.label = province.n;
        p.id = province.n
        // p.children = province.c;
        addrs.push(p)
    
        addrs[pid].children = [];
        province.c.forEach((city, cid) => {      
            let c = {};
            c.label = city.n;
            c.id = `${province.n} ${city.n}`
            addrs[pid].children.push(c)
    
            c.children = []
    
            city.a.forEach((area, aid) => {
                let a = {};
                a.label = area;
                a.id = `${province.n} ${city.n} ${area}`
                c.children.push(a)
            })
    
        })
    })
    addressArr.options = addrs
    
  • 使用naive UI的级联选择器 n-cascader 进行省市区的选择。具体api的详解请看官方文档:级联选择 Cascader。或看主页之前对n-select api的详细解释,相同api作用一样。

     <n-cascader
           v-model:value="area"
           clearable
           separator=" "
           placeholder="请选择区域"
           expand-trigger="click"
           :options="addressArr.options"
           label-field="label"
           value-field="id"
           children-field="children"
           size="small" >                       
      </n-cascader>
    
    
    <script>
     //area就是选择后页面展现的数据
     const area = ref('')
    </script>
    

附成果图:

**结语:**功能也是成功的完成了,使用此方法可以方便快捷的进行省市区的选择。

相关推荐
gqkmiss3 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃9 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰13 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye19 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm21 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js