【无标题】vue2 /Hbuilder 中 纯写 地址四级联动（简单易懂）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

文章目录

前言

一、json文件  并引用

二、使然后就是 完整代码啦

1.页面代码

2.script部分

就这样  完结   效果图

---

---

前言

这几天 小白项目需求  将  全国地址三级联动更改为 四级联动 。然后在 网上一直是搜 四级联动，

比如 淘宝京东 四级联动。   根据高德api  四级联动  都有很多不完整  而且大多是三级联动 。

于是自己整合了一套 完全的  四级联动   粘贴 即可用  

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、json文件  并引用

示例：这个可以网上自己取

二、使然后就是 完整代码啦

1.页面代码

代码如下（示例）：

<template>
<view class="cu-form-group">
                    <view class="flex_s index_center_tops">
                        <view class="flex index_center-center">
                            <!-- <view class="icon_left" /> -->
                            <view class="index_left">
                                地址:
                            </view>
                        </view>
                        <view class="flex">
                            <picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="multiChange"
                                @columnchange="columnChange" range-key="name" >
                                <view class="picker">
                                    <!-- {{ multiArray }}, -->
                                    {{ multiArray[0][multiIndex[0]].name }}
                                    {{ multiArray[0][multiIndex[0]].children[multiIndex[1]].name }}
                                    {{ multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].name}}
                                    {{ multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].children[multiIndex[3]].name}}
                                </view>
                                
                            </picker>
                            <view class="icon_right" />
                        </view>
                    </view>
<view class="cu-form-group">
                    <view class="title">详细地址：</view>
                    <input type="text" placeholder="详细地址" v-model="myFormData.address">
                    <u-icon name="edit-pen" color="#2979ff" size="28"></u-icon></input>
                </view>
</template>

2.script部分

代码如下（示例）：

<script>
    export default {
        name: "editForm",
        data() {
            return {
              
                multiData: require("../../common/address.json"),
                multiIndex: ["0", "0", "0", "0"],
                multiArray: [],
                //text1: ""
            };
        },
  
        mounted() {
            var _this = this;
            console.log(_this.multiData);
            var multiData = _this.multiData;
            var multiIndex = _this.multiIndex;
            console.log();
            console.log(283, multiData);
            // 初始化多列数据
            this.multiArray = [
                multiData,
                multiData[0].children,
                multiData[0].children[0].children,
                multiData[0].children[0].children[0].children
            ];
        },
        methods: {
            // 获取多列的索引
            multiChange: function(e) {
                var multiIndex = e.detail.value;
                //   console.log(multiIndex);
                this.multiIndex = multiIndex;
                this.myFormData.address =
                    this.multiArray[0][multiIndex[0]].name +
                    this.multiArray[0][multiIndex[0]].children[multiIndex[1]].name +
                    this.multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].name +
                    this.multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].children[multiIndex[3]].name
                console.log("地址",this.myFormData.address1);
                this.myFormData.provinceId = this.multiArray[0][multiIndex[0]].code;
                this.myFormData.cityId = this.multiArray[0][multiIndex[0]].children[multiIndex[1]].code+'00000000';
                this.myFormData.countyId = this.multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].code+'000000';
                this.myFormData.streetId = this.multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].children[multiIndex[3]].code+'000';
                console.log("1",this.myFormData.provinceId );
                console.log("2",this.myFormData.cityId);
                console.log("3",this.myFormData.countyId );
                console.log("4",this.myFormData.streetId );
            },

            // 选择列
            columnChange: function(e) {
                // console.log(e);
                var _this = this;
                var multiData = _this.multiData;
                var multiIndex = _this.multiIndex;
                var columnIndex = e.detail.column;
                var columnValue = e.detail.value;

                multiIndex[columnIndex] = columnValue;

                this.multiArray = [
                    multiData,
                    multiData[multiIndex[0]].children,
                    multiData[multiIndex[0]].children[multiIndex[1]].children,
                    multiData[multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].children
                ];
            },
            components: {},
            computed: {}，
            
            // 取消选择
            cancel() {
                this.show = 0

            },

        },
    }
</script>

---

就这样  完结   效果图