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         methods: {
26           saveId(value){
27             if(value[0]!==''){
28               this.provinceAreaId = value[0]
29               this.townAreaId = null
30             }
31             if(value[1]){
32               this.townAreaId = value[1]
33             }
34             this.initData()// 初始化查询接口
35           },
36           chooseCityClear(){
37             this.addArray.provinceAreaName = '',
38             this.addArray.townAreaId = null
39             this.addArray.townAreaName = ''
40           }
41         },
42     }
43 </script>

子组件：

 1 <template>
 2     <div class="area">
 3         <el-select v-model="citys" :placeholder="'请输入'+holder.province" @change="cityChange($event)" value-key="id" clearable style="margin-right:10px;">
 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.province" @change="areaChange($event)" value-key="id" clearable style="">
 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                 citys:"",
27                 areasList:[],
28                 areas:"",
29                 provinceAreaId:null,// 省地区Id
30                 townAreaId:null,// 市地区Id
31                 saveArray:[]
32             }
33         },
34         methods:{
35             cityChange(values){
36                 if(!values){
37                     debugger
38                     this.areas = ''
39                     this.provinceAreaId = null
40                     this.areasList = []
41                     this.townAreaId = null
42                     this.saveArray[0]=null
43                     this.saveArray[1]=null
44                 }else{
45                     this.areasList = values.nodes
46                     this.townAreaId = null
47                     this.provinceAreaId = values.id
48                 }
49                 this.$emit("saveId",this.saveArray)
50             },
51             areaChange(values){
52                 this.townAreaId = values.id
53                 this.saveArray[1]=this.townAreaId
54                 this.$emit("saveId",this.saveArray)
55             }
56         }
57     }
58 </script>
59     
60 <style scoped>
61     .area{
62         display: flex;
63     }
64 </style>

posted @ 2019-05-22 16:01 此夏_唯美阅读(4064) 评论(0) 编辑收藏举报

此夏

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

公告