今天写一下elementUI中select组件的封装：以下面这个以可搜索的下拉框为例：
1.创建子组件：Select.vue
<template><div><el-select v-model="value" filterable :placeholder="'请选择'+select.name" @change="change"><el-optionv-for="item in select.data":key="item.value":label="item.label":value="item.value"></el-option></el-select></div></template><script>export default {name: "Select",props:{select:Object},data() {return {//value: this.select.result}},computed:{value:{get(){this.select.result && this.change(this.select.result)return this.select.result}}},methods: {change(val) {console.log(val);//方法：利用select对象把值传给父组件this.select.result = val//把二级子项的数据找到，并传给父组件let a = this.buildChild(val)console.log(a);this.$emit('erjichange',a)// this.select.chang && this.select.change(this.buildChild(val))},buildChild(val){let data = this.select.data.find(item=>{return item.value == val})return data.children}},}</script><style lang="scss" scoped></style>
2.父组件：
<template><div style="margin:20px"><!-- 下拉框组件的封装 --><Select :select="select" @erjichange="erjichange"></Select><Select :select="selectChild"></Select></div></template><script>import Select from "./Select.vue"import SelectTable from "./SelectTable.vue";export default {name: "SelectMain",components:{ Select, SelectTable },data() {return {selectChild:{result:"",name: "食物子项",data: []},select:{result:"选项1", //选中的valuename: "食物",// change: (data)=>{// console.log(data);// this.selectChild.data = data// },data: [{value: '选项1',label: '黄金糕',children: [{value: '选项1-1',label: '黄金糕1-1', },{value: '选项1-2',label: '黄金糕1-2',}]}, {value: '选项2',label: '双皮奶',children: [{value: '选项2-1',label: '双皮奶2-1', },{value: '选项2-2',label: '双皮奶2-2',}]}, {value: '选项3',label: '蚵仔煎',children: [{value: '选项3-1',label: '蚵仔煎3-1', },{value: '选项3-2',label: '蚵仔煎3-2',}]}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],},}},methods: {erjichange(data) {console.log(data);this.selectChild.result = ''this.selectChild.data = data}},}</script><style lang="scss" scoped></style>
页面效果：
这个例子是做了一个二级联动的效果，当第一个下拉框选择后，第二个下拉框的内容就确定了；
比较难懂的部分是：
子组件：
这所以加这行代码是为了，首次加载时，第一个下拉框有默认值的情况下第二个下拉框也有相应的默认值。
change(val) {console.log(val);//方法：利用select对象把值传给父组件this.select.result = val//把二级子项的数据找到，并传给父组件let a = this.buildChild(val)console.log(a);this.$emit('erjichange',a)//第二种方法触发父组件的change属性// this.select.chang && this.select.change(this.buildChild(val))},buildChild(val){let data = this.select.data.find(item=>{return item.value == val})return data.children}
父组件：
以上我是采用了两种触发父组件change方法的方法：一种是给的select对象添加change属性，二种是用子传父的$emit方法；
