更新记录

2.0.1（2020-06-10）

将抽离的数据文件js 调整为父子组件传参

2.0.0（2020-03-04）

1、修复1.0.0版本中获取选中项数据，一级和三级均赋值为二级的bug 2、参考评论区，增加兼容二级、一级使用的情况

1.0.0（2020-03-02）

初始版本

平台兼容性

关于

• 选择省-学校-专业 （省-市-区）等，picker形式
• 同事使用的插件市场的simple-address开发了这个功能，但是在数据处理上对原有tree结构数据不友好， 我作为接口开发的人员，按照其结构重新开发了接口，但总感觉数据接口不易于理解， 故基于simple-address，对数据格式进行了调整
• 内部方法描述可参考 simple-address

数据结构（普通tree）

[
    {
        "id":"1",
        "name":"北京",
        "code":"11",
        "children":[
            {
                "id":"1230040276324601858",
                "name":"北京大学",
                "code":"10001",
                "children":[
                    {
                        "id":"1219144373145477122",
                        "name":"风景园林",
                        "code":"fengjingyuanlin"
                    }
                ]
            }
        ]
    }
]

使用代码片段

<template>
    <view class="content">
        <button type="primary" @tap="openLevel">打开地址</button>
        <text>{{pickerText}}</text>
        <!--
        mask-bg-color="rgba(0, 229, 238, 0.4)" // 自定义遮罩层背景颜色
        -->
        <level-linkage ref="levelLinkage" 
            :pickerValueDefault="pickerValueDefault" 
            :allData="treeData"
            @onConfirm="onConfirm" themeColor='#007AFF'></level-linkage>
    </view>
</template>

<script>
    import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
    export default {
        data() {
            return {
                pickerValueDefault: [0, 0, 0],
                pickerText: '',
                treeData: [
                    {
                        "id":"1",
                        "name":"北京",
                        "code":"11",
                        "children":[
                            {
                                "id":"1230040276324601858",
                                "name":"北京大学",
                                "code":"10001",
                                "children":[
                                    {
                                        "id":"1219144373145477122",
                                        "name":"风景园林",
                                        "code":"fengjingyuanlin"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ,
        components: {
            levelLinkage
        },
        methods: {
            openLevel() {
                this.$refs.levelLinkage.open();
            },
            onConfirm(e) {
                // e 确认后选中的数据
                this.pickerText = JSON.stringify(e)
            }

        }
    }
</script>

二级/一级兼容

pickerValueDefault 参数

• 数组第一项 表示最左侧第一列表 元素index 必须大于等于0
• 数组第二项 表示最左侧第二列表 元素index 当值小于 0 时，即变成一级选择器
• 数组第三项 表示最左侧第三列表 元素index 当值小于 0 时，即变成二级选择器（如果第二项小于 0 则无论第三项是否大于0 都不显示）