VUE ElementUI 下拉框组件（select）的封装

今天写一下elementUI中select组件的封装：以下面这个以可搜索的下拉框为例：

 1.创建子组件：Select.vue

<template>
  <div>
    <el-select v-model="value" filterable :placeholder="'请选择'+select.name" @change="change">
    <el-option
      v-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",  //选中的value
          name: "食物",
          // 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方法；