实例| 统软云 AVM框架封装省城市级联选择弹出框
浏览：687 次
省和城市级联选择框也可用于选择其他多级数据。典型的场景是省和城市选择。
当前场景设置为级别3，可根据您的实际需要更改为级别2或级别4或更高。
数据源是具有树结构的典型JSON数组数据。在实际代码中，我封装了一个关于省和城市三级数据的js插件。具体使用方法为省市区三级行政区划数据JS插件。今天，我们将介绍如何使用统软云 AVM框架封装省级和城市级联选择弹出框。
组件文件
区域ascader.html
<模板>
<脚本>
导出默认值{
name:'区域cascader'，
道具：{
选项：阵列
},
安装（）{
this.data.result[0]=｛value：null，text:“”｝；
},
已安装（）{
此数据。selectArea=this.props.options；
},
数据（）{
返回{
结果：[]，
选择索引：0，
选择区域：[]
}
},
方法：{
设置选择项（e）{
如果（this.data.selectIndex＜3）{
this.data.result[this.data.selectIndex].value=e.currentTarget.dataset.value；
this.data.result[this.data.selectIndex].text=e.currentTarget.dataset.text；
//添加下一级别
this.data.selectIndex+=1；
如果（this.data.selectIndex＜3）{
this.data.result[this.data.selectIndex]=｛值：null，文本：“”｝；
var parentOption=this.data.selectArea.filter（item=>item.value==e.currentTarget.dataset.value）；
此数据。selectArea=parentOption[0]。children；
}
如果（this.data.selectIndex==3）{
this.fire（'完成'，this.data.result）；
}
}
},
closeCascader（）{
this.fire（“关闭”，“”）；
},
setSelect（e）{
this.data.selectIndex=e.currentTarget.dataset.index；
如果（this.data.selectIndex==0）{
此数据。selectArea=this.props.options；
}
否则如果（this.data.selectIndex==1）{
var parentOption=this.props.options.filter（item=>item.value==this.data.result[0].value）；
此数据。selectArea=parentOption[0]。children；
}
}
}
}