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 {
 7     components:{
 8       linkage
 9     },
10     data() {
11       return {
12             citysList:[],
13             holder:{
14               "province":"省",
15               "city":"市"
16             },
17             provinceAreaId:null,// 省地区Id
18             townAreaId:null,// 市地区Id
19             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>
11     
12 <script>
13     export default {
14         props:{
15             citysList:{
16                 type:Array,
17                 default:null
18             },
19             holder:{
20                 type:Object,
21                 default:null
22             }
23         },
24         data() {
25             return {
26                 saveArray:[],
27                 citys:"",
28                 provinceAreaId:null,// 省地区Id
29                 townAreaId:null,// 市地区Id
30                 areasList:[],
31                 areas:""
32             }
33         },
34         methods:{
35             cityChange(value){
36                 this.areas = ''
37                 this.areasList = value.nodes
38                 this.provinceAreaId = value.id
39                 this.saveArray[0]=this.provinceAreaId
40                 this.$emit("saveId",this.saveArray)
41             },
42             areaChange(value){
43                 this.townAreaId = value.id
44                 this.saveArray[1]=this.townAreaId
45                 this.$emit("saveId",this.saveArray)
46             }
47         }
48     }
49 </script>

 

转载于:https://www.cnblogs.com/CinderellaStory/p/10906476.html