vue + mint-ui 省市区级联选择
<mt-popup
v-model="showSelectArea"
:modal="true"
position="bottom"
style="width:100vw;"
>
<!-- <p>省份 - 城市 - 区县</p> -->
<div class="showToolbar">
<div @click="controlSelectArea(false)" style="flex:0.5;">取消</div>
<div style="flex:1;"></div>
<div @click="controlSelectArea(true)" style="flex:0.5;">完成</div>
</div>
<mt-picker
class="picker"
:slots="AdminDivisions"
@change="onAreaChange"
>
</mt-picker>
</mt-popup>
import PCA from './pca.js'
// 省市区
AdminDivisions: [
{
flex: 0.5,
defaultIndex: 0,
values: Object.keys(PCA),
className: "",
textAlign: "center"
},
{
divider: true,
content: "",
className: "slot2"
},
{
flex: 1,
defaultIndex: 0,
values: [],
className: "",
textAlign: "center"
},
{
divider: true,
content: "",
className: "slot2"
},
{
flex: 0.5,
defaultIndex: 0,
values: [],
className: "",
textAlign: "center"
}
],
onAreaChange(picker, values) {
// 先判断
if (PCA[values[0]]) {
picker.setSlotValues(1, Object.keys(PCA[values[0]]));
picker.setSlotValues(2, PCA[values[0]][values[1]]);
// this.area = values.join(" ");
// this.province = values[0];
// this.city = values[1];
// this.area = values[2];
}
},
references:
