100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Vue+Element-ui+二级联动封装组件

Vue+Element-ui+二级联动封装组件

时间:2022-06-18 21:09:29

相关推荐

Vue+Element-ui+二级联动封装组件

通过父子组件传值

父组件:

1 <template> 2 <linkage :citysList="citysList" :holder="holder" @saveId="saveId"></linkage> 3 </template> 4 <script> 5 import linkage from './common/linkage' 6 export default { 7components:{ 8 linkage 9},10data() {11 return {12 citysList:[],13 holder:{14"province":"省",15"city":"市"16 },17 provinceAreaId:null,// 省地区Id18 townAreaId:null,// 市地区Id19 provinces: [],// 省地区20 citys:[],// 市地区21 city: '',// 市地区22 province: '',// 省地区23 }24 }25}26 </script>

子组件:

1 <template> 2<div class="area"> 3<el-select v-model="citys" :placeholder="'请输入'+holder.province" @change="cityChange($event)" value-key="id" clearable> 4 <el-option v-for="item in citysList" :key="item.areaName" :label="item.areaName" :value="item"></el-option> 5 </el-select> 6 <el-select v-model="areas" :placeholder="'请输入'+holder.city" @change="areaChange($event)" value-key="id" clearable> 7 <el-option v-for="item in areasList" :key="item.areaName" :label="item.areaName" :value="item"></el-option> 8 </el-select> 9</div>10 </template>1112 <script>13export default {14 props:{15 citysList:{16 type:Array,17 default:null18 },19 holder:{20 type:Object,21 default:null22 }23 },24 data() {25 return {26 saveArray:[],27 citys:"",28 provinceAreaId:null,// 省地区Id29 townAreaId:null,// 市地区Id30 areasList:[],31 areas:""32 }33 },34 methods:{35 cityChange(value){36 this.areas = ''37 this.areasList = value.nodes38 this.provinceAreaId = value.id39 this.saveArray[0]=this.provinceAreaId40 this.$emit("saveId",this.saveArray)41 },42 areaChange(value){43 this.townAreaId = value.id44 this.saveArray[1]=this.townAreaId45 this.$emit("saveId",this.saveArray)46 }47 }48}49 </script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。