欢迎光临
我们一直在努力

uniapp 省市区三级联动

1. uniapp 省市区三级联动

  在uniapp中实现省市区三级联动的方法。首先,在根目录创建一个存放省市区js文件,定义省市区数据。然后,在页面中使用picker组件,设置mode为multiSelector,绑定省市区数据。通过监听picker的change和columnchange事件,实现省市区数据的联动选择。最后,将选择的省市区数据显示在页面上。该方法简单易用,适用于需要省市区选择的场景。 在这里插入图片描述 在这里插入图片描述

1.1. 组件city-picker.vue

<template>
<view>
<picker class=\”city-picker-layout\”
mode=\”multiSelector\”
rangekey=\”name\”
:range=\”array\”
:value=\”value\”
@change=\”bindPickerChange\”
@columnchange=\”columnchange\”>
<slot></slot>
</picker>
</view>
</template>
<script>
import AllAddress from \’/api/city\’

let selectCode = [\’\’, \’\’, \’\’]
let selectValue = [\’\’, \’\’, \’\’]
export default {


name: \’modal\’,
data() {


return {


value: [0, 0, 0],
array: [],
index: 0
}
},
created() {


this.initSelect()
},
props: {

},
methods: {


// 初始化地址选项
initSelect() {

赞(0)
未经允许不得转载:171主机测评 » uniapp 省市区三级联动
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址