关于联动方法来自:https://www.cnblogs.com/zling-gnilz/p/7987796.html
下面代码留个备份
HTML:
<mt-picker :slots="slots" value-key="name" @change="onValuesChange"></mt-picker>
JS :
const address = [
{
"code": "001",
"name": "省份1",
"childs": [
{
"code": "001-1",
"name": "城市1",
"childs": [
{
"code": "001-1-1",
"name": "城市1县城1"
},
{
"code": "001-1-2",
"name": "城市1县城2"
}
]
},
{
"code": "001-2",
"name": "城市2",
"childs": [
{
"code": "001-2-1",
"name": "城市2县城1"
},
{
"code": "001-2-2",
"name": "城市2县城2"
}
]
}
]
},
{
"code": "002",
"name": "省份2",
"childs": [
{
"code": "002-1",
"name": "城市3",
"childs": [
{
"code": "002-1-1",
"name": "城市3县城1"
},
{
"code": "002-1-2",
"name": "城市3县城2"
}
]
},
{
"code": "002-2",
"name": "城市4",
"childs": [
{
"code": "002-2-1",
"name": "城市4县城1"
},
{
"code": "002-2-2",
"name": "城市4县城2"
}
]
}
]
},
{
"code": "003",
"name": "省份3",
"childs": [
{
"code": "003-1",
"name": "城市5",
"childs": [
{
"code": "003-1-1",
"name": "城市5县城1"
},
{
"code": "003-1-2",
"name": "城市5县城2"
}
]
},
{
"code": "003-2",
"name": "城市6",
"childs": [
{
"code": "003-2-1",
"name": "城市6县城1"
},
{
"code": "003-2-2",
"name": "城市6县城2"
}
]
}
]
},
];
export default {
name: 'app',
data () {
return {
myAdress:null,
slots: [
{
flex: 1,
values: address,
defaultIndex:10,
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: address[0].childs,
defaultIndex:0,
className: 'slot3',
textAlign: 'left'
}, {
divider: true,
content: '-',
className: 'slot4'
}, {
flex: 1,
values: address[0].childs[0].childs,
defaultIndex:0,
className: 'slot5',
textAlign: 'left'
}
]
}
},
methods: {
onValuesChange(picker, values) {
if(!values[0]){
this.$nextTick(()=>{
if(this.myAdress){
// 赋默认值
}else{
picker.setValues([address[0],address[0].childs[0],address[0].childs[0].childs[0]])
}
});
}else{
///解决单一市问题//
let slot3 = picker.getSlotValue(1); //当前
// //省的数据变化后如果不相同,强制将市这一栏的数据定位到第一个
if (slot3) {
slot3 = slot3.code.substring(0, 2);
let now_slot3 = values[0].childs[0].code.substring(0, 2);
if (slot3 != now_slot3) {
picker.setSlotValue(1, values[0].childs[0]);
}
}
///解决单一市问题//
picker.setSlotValues(1, values[0].childs);
let town = [];
if(values[1]){
town = values[1].childs;
}
picker.setSlotValues(2,town);
}
}
}
}
解决单一市无法联动问题,上面代码已加入
let slot3 = picker.getSlotValue(1); //当前
// //省的数据变化后如果不相同,强制将市这一栏的数据定位到第一个
if (slot3) {
slot3 = slot3.code.substring(0, 2);
let now_slot3 = values[0].childs[0].code.substring(0, 2);
if (slot3 != now_slot3) {
picker.setSlotValue(1, values[0].childs[0]);
}
}
联动数据推荐:https://github.com/modood/Administrative-divisions-of-China
数据下载/无法使用请注意键名
文件列表 | JSON | CSV |
---|---|---|
省级(省份、直辖市、自治区) | provinces.json | provinces.csv |
地级(城市) | cities.json | cities.csv |
县级(区县) | areas.json | areas.csv |
乡级(乡镇、街道) | streets.json | streets.csv |
村级(村委会、居委会) | villages.json | villages.csv |
文件列表 | 普通 | 带编码 |
---|---|---|
“省份、城市” 二级联动数据 | pc.json | pc-code.json |
“省份、城市、区县” 三级联动数据 | pca.json | pca-code.json |
“省份、城市、区县、乡镇” 四级联动数据 | pcas.json | pcas-code.json |
“省份、城市、区县、乡镇、村庄” 五级联动数据 | - | - |
提示:需要打包下载全部文件,请看 Releases。