vue+element-ui封装一个下拉框

一.单下拉框组件封装

1.下载安装element-ui组件库，并创建文件夹文件等操作，配置好路由。

2.在element-ui里面复制select代码至组件中。

3.数据的处理（数据应该放在使用者的身上而不是select组件上，用组件通信的方式进行传值）

4.选择值的处理  子组件选择一个内容后要把值传给父组件，可以在第三步传给子组件时加个数据比如result=‘’，一起传过去，然后再子组件获取数据后复制给result。

5.请选择那个提示框文字可能也要根据父组件提示内容进行传值，而不是简单的写死。比如也是同样的在传给子组件数据时加一个name,此时就可以在子组件获取并进行展示。

二.二级联动下拉框组件封装

1.再在父组件写一个组件，使用flex布局形成两个下拉框

2.同样在父组件上写数据进行传递，但数据是基于一级联动选择后的子数据来传给二级联动数据的，

3.此时需要模拟一些在一级联动下的children数据，还有设置父组件上的初始化二级联动数据设置为空。

4.处理数据。此时需要在父组件一级联动数据下去声明一个函数例如

 changevue:(data)=>{

            this.selectChildren.result=''

         console.log(data)

         this.selectChildren.data = data

        },

然后再封装组件里面写一个change事件方法，获取到当前的val,通过获取到val来遍历数组找到当前val下的item，此时item也是一个数组，但其包含了当前选中一级联动的数据下的二级联动数据，此时可以返回

 

然后就可以在一级联动数据里刚才定义的函数里进行将数据赋值给设置好的空的二级联动数据数组里。此时基本数据可以展示，当然还存在一些小问题需要自己去修改。

 methods: {

        change(val){

            console.log(val)

            this.select.result = val

           this.select.changevue && this.select.changevue(this.findIndex(val))

        },

        findIndex(val){

         const childrendata = this.select.data.find(item=>{

              return item.value==val

          })

          return childrendata.children

        }

    },