作者：欧阳火凡 | 来源：互联网 | 2023-07-26 23:51
支持多端——h5、app、微信小程序、支付宝小程序支持自定义配置picker插件级数支持无限级注意事项：插件传入数据格式为children树形格式，内部包含：id、name参
支持多端——h5、app、微信小程序、支付宝小程序...
支持自定义配置picker插件级数
支持无限级
注意事项：插件传入数据格式为children树形格式，内部包含：id、name
参数 |
类型 |
描述 |
默认值 |
必选 |
|---|
title |
string |
标题 |
'' |
否 |
layer |
number |
控制几级联动 |
1 |
否 |
data |
arr |
数据 如：[{text: '', adcode: '', children: [{text: '', adcode: ''}]}] |
[] |
否 |
组件运行图示：
组件选择后返回数据如：
引用示例：
picker无限级联动
ref="picker"
:title="auiPicker.title"
:layer="auiPicker.layer"
:data="auiPicker.data"
@callback="pickerCallback"
>
aui-picker组件完整代码：
项目components文件夹下创建aui-picker夹，此文件夹下创建aui-picker.vue——多级联动组件
>
v-if="nav.length>0"
v-for="(item, index) in nav"
:key="index"
:data-index="index"
:class="[index==navCurrentIndex ? 'active' : '', 'aui-picker-navitem-'+index]"
:0 10px 0 0' : '0 30px 0 0'}"
@click.stop="_changeNav($event)"
>{{item.name}}
:key="nav.length"
:data-index="nav.length"
:class="[nav.length==navCurrentIndex ? 'active' : '', 'aui-picker-navitem-'+nav.length]"
:0 10px 0 0' : '0 30px 0 0'}"
@click.stop="_changeNav($event)"
>请选择
v-for="(list, index) in queryItems.length + 1"
:key="index"
:data-index="index"
:class="[index==navCurrentIndex ? 'active' : '']"
>
v-for="(item, key) in items"
v-if="item.pid=='0'"
:key="key"
:data-pindex="index"
:data-index="key"
:data-id="item.id"
:data-pid="item.pid"
:data-name="item.name"
:class="{'active': result.length>index && result[index].id==item.id}"
:background': touchConfig.index==key && touchConfig.pindex==index ? touchConfig.style.background : ''}"
@click.stop="_chooseItem($event)"
@touchstart="_btnTouchStart($event)"
@touchmove="_btnTouchEnd($event)"
@touchend="_btnTouchEnd($event)"
>{{item.name}}
v-for="(item, key) in queryItems[index-1]"
:key="key"
:data-pindex="index"
:data-index="key"
:data-id="item.id"
:data-pid="item.pid"
:data-name="item.name"
:class="{'active': result.length>index && result[index].id==item.id}"
:background': touchConfig.index==key && touchConfig.pindex==index ? touchConfig.style.background : ''}"
@click.stop="_chooseItem($event)"
@touchstart="_btnTouchStart($event)"
@touchmove="_btnTouchEnd($event)"
@touchend="_btnTouchEnd($event)"
>{{item.name}}
蓦然、回首，那人就在灯火阑珊处
京公网安备 11010802041100号