更新记录

1.0.3（2021-10-21） 下载此版本

修复按钮文字显示不全的问题,同时兼容微信小程序使用

1.0.2（2021-09-26） 下载此版本

1. 禁止滚动时父级页面滚动
2. 修复app设备时 按钮文字太小
3. 修改懒加载是,"已选择区域"的显示逻辑(先请求,成功后再显示到 已选择区域)
4. 更改选择区域的高度为800rpx

1.0.1（2021-09-26） 下载此版本

修复 懒加载模式下, 点击 "已选择" 的区域按钮, 数据不能向上一级查找

添加默认的标题名称

支持自定义显示名称

平台兼容性

说明

支持初始数据和懒加载两种方式

isLoad: 是否是懒加载模式 (默认false)

initList: 初始化列表数据(数组格式)

title: 选择框标题

idkey: 指定唯一主键id, 默认是 "id"

childrenkey: 指定下级数组键名称, 默认是 childrenkey

namekey: 指定显示的名称

isSuper: 是否允许选择上级,默认是false, 如果是true,右上角会出现确定按钮,点击确定按钮,就激活事件@itemOnclick,返回最后选择的一个子项

@itemOnclick: 到了末级的时候,返回最后点击的节点,并关闭选择窗口

@load: 仅懒加载有效,点击节点后,触发此事件, 开发者需要再此事件中,向后台查询数据, 并将数据通过此事件携带的回调函数返回,如果返回的是空数组, 则认为到了最末级,触发@itemOnclick事件,并关闭窗口,如果返回的不是空数组,则刷新数据显示

通过调用 this.$refs.picker._show();方法触发窗口 显示 和 隐藏 (this.$refs.picker._hide();) (注意:ref="picker"要配置)

引入文件

import gljyDataPicker from "@/components/gljy-data-picker/gljy-data-picker.vue";

components:{
    gljyDataPicker
},

前端使用

<gljyDataPicker ref="picker" :idkey="'rgid'" :isSuper="true" namekey="rgName" :childrenkey="'children'" :title="'选择'" :initList="initList" @load="loadNode" @itemOnclick="itemOnclick" :isLoad="true" ></gljyDataPicker>

数据格式

//name这个目前没法指定, 是显示的名称
initList:[
    {rgid:"1", rgName:"湖北省", children:[{rgid:"11", rgName:"武汉市"},{rgid:"12", rgName:"襄阳市"}] }
]

事件传参

loadNode(item, resolve){
    //获取到当前点击的id值
    let rgid = item.rgid;
    //根据rgid查询后台数据,得到下级数据,没有就返回 [] (建议一开始传入数据的时候,就加一个标记是否是末级的字段)
    let node = [];//假设已经从后台查到数据
    resolve(node);//调用回调
},
itemOnclick(res){
    console.log("itemOnclick", res);
}