效果图:
1.vue主要代码
template:
<template>
<view class="content">
<!-- 居住信息 -->
<view class="item-address">
<view class="addressCot">
<view class="addressEdit">
<view class="texttitle">选择地区 :</view>
<view class="input" type="text" placeholder="请选择地区">
<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
@change="pickerChange" @columnchange="pickerColumnchange">
<view class="">{
{select}}</view>
</picker>
</view>
</view>
<view class="addressEdit">
<view class="texttitle">居住村(小区) :</view>
<input class="inputcontent" v-model="xiaoqu" placeholder="请填写居住村(小区) 名称" />
</view>
<view class="addressEdit2">
<view class="texttitle">详细地址 :</view>
<input class="inputcontent" v-model="details" placeholder="请填写详细地址(门牌号)" />
</view>
</view>
</view>
<!-- 修改按钮 -->
<button class="changeaddress" @click="btnChangeAddress">修改</button>
</view>
</template>
2.script
<script>
import provinceData from "../../provinceAndCity.js"
export default {
data() {
return {
oldpProvinceDataList: provinceData.data,
newProvinceDataList: [
[],
[],
[]