介绍 export default {
,方法:{
,onValuesChange(选择器,值),{
值,if ([0],祝辞,值[1]),{
,picker.setSlotValue(1,值[0]);
,}
,}
},
,数据(){
,return {
,插槽:[
,{
flex才能:1,
,,价值观:[& # 39;2015 - 01 & # 39;,,& # 39;2015 - 02 - & # 39;,,& # 39;2015 - 03 & # 39;,,& # 39;2015 - 04 - & # 39;,,& # 39;2015 - 05 - & # 39;,,& # 39;2015 - 06 - & # 39;],
,,名字:& # 39;单曲# 39;
textAlign才能:& # 39;对# 39;
,},{
分频器才能:,真的,
,,内容:& # 39;& # 39;
,,名字:& # 39;slot2& # 39;
,},{
flex才能:1,
,,价值观:[& # 39;2015 - 01 & # 39;,,& # 39;2015 - 02 - & # 39;,,& # 39;2015 - 03 & # 39;,,& # 39;2015 - 04 - & # 39;,,& # 39;2015 - 05 - & # 39;,,& # 39;2015 - 06 - & # 39;],
,,名字:& # 39;slot3& # 39;
textAlign才能:& # 39;左# 39;
,}
,)
,};
,}
}; onProvinceChange(选择器、,值),{
,,
,,this.province =, picker.getValues () [0]
,,var cityArr =, [];
,,(var key 拷贝provinceCity [this.province]), {
,,cityArr.push(关键);
,,}
,,this.slots2 [0] .values =, cityArr;
,,},
onCityChange才能(选择器,值),{
,,this.city =, picker.getValues () [0]
,,var countyArr =, [];
,,(var key 拷贝provinceCity [this.province] [this.city]), {
,,countyArr.push(关键);
,,}
,,this.slots3 [0] .values =, countyArr;
,,},
onCountyChange才能(选择器,值),{
,,
,,this.county =, picker.getValues () [0]
,,},
使用mint-ui怎么实现一个三级联动效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<强>具体实现:
<强>通过阅读官网的实例,大概就能知道这个组件的用法:
在vue中写入组件:& lt; mt-picker:槽=皊lots"@change=皁nValuesChange"祝辞& lt;/mt-picker>
我们可以看的到,这个组件中传入的数据槽和当其改变是触发的事件:onValuesChange(),所以只要在使用该组件的父组件内注册槽和onValuesChange就可以实现了
<强>以下是官网上的实例:
在实际操作中当我想使用选择来进行省份,城市,地区的选择时,发现最大的问题是搞不到符合该插件数据格式的数据,于是从百度上扒了一份省份,城市,地区数据之后写了一个函数对其进行了处理,在这里,共享给大家:
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
