uni-app实现三级联动
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app实现三级联动相关的知识,希望对你有一定的参考价值。
参考技术A 首先拿到后台返回的数据结构如下template:
data:
获取数据并生成uni-app组件支持的数据格式
绑定picker 组件事件
使用react和axios实现的城市三级联动
使用react和axios搭建的城市三级联动
1 import React from "react" 2 import axios from "axios"; 3 class CeshiContainer extends React.Component { 4 constructor(props) { 5 super(props); 6 this.state = { 7 data: [], 8 province: "", 9 city: "", 10 county: "", 11 provinces: [], 12 cities: [], 13 counties: [] 14 } 15 } 16 17 handleChangeprovince(e) { 18 e.preventDefault() 19 const data = this.state.data 20 for(var i in data) { 21 if(data[i].name == e.target.value) { 22 this.setState({ 23 cities: data[i].city, 24 counties: data[i].city[0].area, 25 province: e.target.value, 26 city: "", 27 county: "" 28 }) 29 } 30 } 31 } 32 33 handleChangecity(e) { 34 e.preventDefault() 35 const cities = this.state.cities 36 for(var i in cities) { 37 if(cities[i].name == e.target.value) { 38 this.setState({ 39 counties: cities[i].area, 40 city: e.target.value, 41 42 }) 43 } 44 } 45 } 46 47 handleChangecounty(e) { 48 e.preventDefault() 49 this.setState({ 50 county: e.target.value 51 }) 52 } 53 render() { 54 return( 55 <div> 56 { 57 this.state.provinces.length!=0 58 ? 59 <p> 60 <select onChange={this.handleChangeprovince.bind(this)}> 61 <option>省</option> 62 { 63 this.state.provinces.map((i,index) => ( 64 <option value={i} key={index}>{i}</option> 65 )) 66 } 67 </select> 68 <select onChange={this.handleChangecity.bind(this)}> 69 <option>市</option> 70 { 71 this.state.cities.map((i,index) => ( 72 <option value={i.name} key={index}>{i.name}</option> 73 )) 74 } 75 </select> 76 <select onChange={this.handleChangecounty.bind(this)}> 77 <option>区</option> 78 { 79 this.state.counties.map((i,index) => ( 80 <option value={i} key={index}>{i}</option> 81 )) 82 } 83 </select> 84 </p> 85 :<p>11111111</p> 86 } 87 <div>{this.state.province+this.state.city+this.state.county}</div> 88 </div> 89 ) 90 } 91 componentDidMount() { 92 const provinces = [] 93 const data = [] 94 //请求API 95 const url = "***********************"; 96 const resquest = axios.get(url); 97 resquest.then(res => { 98 Object.assign(res.data).map(i => { 99 provinces.push(i.name) 100 data.push(i) 101 }) 102 this.setState({ 103 data: data, 104 provinces: provinces, 105 cities: data[0].city, 106 counties: data[0].city[0].area 107 }) 108 }) 109 110 } 111 112 } 113 114 export default CeshiContainer
以上是关于uni-app实现三级联动的主要内容,如果未能解决你的问题,请参考以下文章