获取地址与三级地址联动

最新推荐文章于 2024-09-25 09:08:13 发布

原创最新推荐文章于 2024-09-25 09:08:13 发布 · 804 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html

element 专栏收录该内容

5 篇文章

订阅专栏

获取地址与三级地址联动

获取当前地址

引入对应的链接

<script language="javascript" type="text/javascript" src="http://ip.ws.126.net/ipquery"></script>

即可获取当前省市地址，以自身为例，获取到的数据为，可直接使用

var lo="湖南省", lc="长沙市"; var localAddress={city:"长沙市", province:"湖南省"}

三级联动地址

我一般引入插件（ element-ui / element-plus ）实现
引入对应的JS

https://cdn.caihang.xyz/JS/citydata.js

使用对应的组件
组件地址：https://element-plus.gitee.io/#/zh-CN/component/cascader

// element-Plus 的级联选择器
            <el-cascader
                style="width:100%"
                v-model="DialogRuleForm.addCityVal1"
                :options="cityDate"
                :props="props"
                @change="handleChange">
            </el-cascader>
            
// js 调用封装好的 地址数据
// import cityDate from '../../assets/citydata'
        data() {
            return {
              // 地址数据，由 citydata.js 获取
              cityDate,
            }
        }