更新记录

1.0（2024-11-14）

1. 支持省市区县级联选择器，可配置是否显示县级数据 2.支持单选、多选 3.支持省市区县异步加载 4.支持一次性数据加载

平台兼容性

在线预览地址

地址： https://lusz.top/area/

功能介绍

1. 支持省市区县级联选择器，可配置是否显示县级数据 2.支持单选、多选 3.支持省市区县异步加载 4.支持一次性数据加载 5.数据量多不卡顿

   使用示例

<areaTree ref="tree" :multiple="true" :async-load="true" :getAreaData="getAreaData"  :hasTown="true" ></areaTree>

参数说明

选中值数据字段说明

let values = [{
    cityId,
    cityName,
    provinceId,
    provinceName,
    countyId,
    countyName,
    townId: item.id,
    townName: item.name
}]

必传getAreaData方法说明

需返回一个Promise或者return一个值，如省列表，市列表

getAreaData(data){
    return new Promise((resolve) => {
        uni.request({
            url: ',
            method: 'GET',
            data,
            success: (res) => {
                resolve(res.data)
            }
        })
    })
}

接口数据格式要求

    [
        {
            name: '一级',
            id: '1',
            children:[]
        }
    ]

获取选中的值

    let value = this.$refs.tree.checkValue

回显选中的值

    this.$refs.tree.setValue(values)

将继续持续维护和开发，如需定制开发可联系我v：122720267

完整示例代码说明：

<template>
    <view>
        <areaTree ref="tree" :multiple="!!Number(selecType)" :async-load="!!Number(sync)" 
            :getAreaData="getAreaData"  :hasTown="!!Number(hasTown)" ></areaTree>
        <view class="fixed-bottom">
            <view class="clear" @click="clears">
                清除
            </view>
            <view class="confirm" @click="confirm">
                确定选择
            </view>
        </view>
    </view>
</template>

<script>
    import areaTree from '@/components/xiaolu-area-tree/index.vue'
    import {getApi} from '../api.js'
    export default {
        components: {
            areaTree
        },
        data() {
            return {
                values: [],
                selecType: 1,
                sync: 0,
                hasTown:0
            };
        },
        onLoad({values}) {
            this.$nextTick(() => {
                this.$refs.tree.setValue(values)
            })
        },
        methods: {
            clears() {
                this.values = []
                this.$refs.tree.values = []
            },
            getAreaData(query) {
                return new Promise((resolve) => {
                    uni.request({
                        url: '',
                        method: 'GET',
                        data:query,
                        success: (res) => {
                            resolve(res.data)
                        }
                    })
                })
            },
        }
    }
</script>

完整示例代码说明（弹窗模式）：

1. 在页面引用组件，并注册

import areaTree from '@/components/xiaolu-area-tree/index.vue'

添加组件使用

<template>
    <view class="content">
        <uniPopup background-color="#fff" ref="popup" type="bottom">
            <view class="center">
                选择地区
            </view>
            <view>
                <areaTree v-if="show" :hasTown="hasTown" :getAreaData="getAreaData" scrollHeight="60vh" ref="tree">
                </areaTree>
            </view>
            <view class="fixed-bottom">
                <view class="clear" @click="clears">
                    清除
                </view>
                <view class="confirm" @click="confirm">
                    确定选择
                </view>
            </view>
        </uniPopup>
    </view>
</template>

<script>
    import areaTree from '@/components/xiaolu-area-tree/index.vue'
    import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
    import { getApi } from '../api.js'
    export default {
        components: {
            areaTree,
            uniPopup
        },
        data() {
            return {
                values: [],
                hasTown: false,
                show:false
            };
        },
        methods: {
            getAreaData() {
                return getApi({all:1,hasTown:0})
            },
            showTree() {
                this.show = true
                this.$refs.popup.open('bottom')
            },
            clears() {
                this.values = []
                this.$refs.tree.values = []
            },
            confirm() {
                this.show = false;
                console.log(this.$refs.tree.values, this.$refs.tree.isAll ? '全部' : '')
                this.values = this.$refs.tree.values
                this.$refs.popup.close()
            }
        }
    }
</script>