在Vue中封装一个select组件

我们使用iview封装一个select组件
这里写图片描述
封装的是每一个select下拉框

<template>
  <div class='select'>
    <i-select
     :model.sync='selecteddata'
     :placeholder='placeholdertext'
     filterable multiple
     @on-change='getselecteddata'
    >
      <i-option
       v-for ='(item, index) in list'
       :value='item.value'
       :key='index'
      >{{item.label}}
      </i-option>
    </i-select>
  </div>
</template>

<script>
export default {
  name: 'SelectBox',
  props: {
    placeholder: {
      type: String,
      required: false,
      default: 'Select'
    },
    optionlist: Array
  },
  data () {
    return {
      placeholdertext: this.placeholder,
      list: this.optionlist,
      selecteddata: []
    }
  },
  methods: {
    getselecteddata (value) {
      // console.log(value)
      this.$emit('getSelectedData', value)
    }
  }
}
</script>

iview 中的select比较丑，修改样式忽略，很多修改插件不成功是可能是scoped作用域的问题
使用iview select 的原因在于，它有搜索功能，多选可以叉调功能，基本可以满足下拉菜单的功能

<i-select
     :model.sync='selecteddata'
     :placeholder='placeholdertext'
     filterable multiple
     @on-change='getselecteddata'
    >

:model.sync='selecteddata' 为选中的option，当为单选的时候是字符串或Number，多选时为数组,需要在data中初始化
placeholder 我们根据外界传过来的值显示，默认可以设置为’Select’

  props: {
    placeholder: {
      type: String,
      required: false,
      default: 'Select'
    }
  }

filterable multiple :可搜索，可多选
@on-change=’getselecteddata’：这个是得到选中的数据！注意必须写为on-change才生效，得到的是数据中value的值，如果想要得到label的值，需要在select 添加label-in-value 得到的是数组对象
我们得到这个数据需要往父组件中传递，父组件得到参数往后台传递

  methods: {
    getselecteddata (value) {
      // console.log(value)
      this.$emit('getSelectedData', value)
    }
  }

value是选中的option构成的数组

      <i-option
       v-for ='(item, index) in list'
       :value='item.value'
       :key='index'
      >{{item.label}}
      </i-option>

option中循环遍历下拉列表数据，是父组件传递过来的

  props: {
    optionlist: Array
  }

欧克，在父组件中使用：

        <select-box
         :optionlist='citylist'
         placeholder='Select City'
         v-on:getdata='getSelectedData'
        ></select-box>

往父组件中传递placeholder值和下拉列表的数据

      citylist: [
        {
          value: 'beijing',
          label: '北京市'
        },
        {
          value: 'shanghai',
          label: '上海市'
        },
        {
          value: 'shenzhen',
          label: '深圳市'
        },
        {
          value: 'hangzhou',
          label: '杭州市'
        },
        {
          value: 'nanjing',
          label: '南京市'
        },
        {
          value: 'chongqing',
          label: '重庆市'
        }
      ]

同时，父组件需要接收一个选中的option数组

  v-on:getdata='getSelectedData'
  ...
  methods: {
    getSelectedData (data) {
      console.log(data)
    }
  }

这样父组件就得到了子组件的选中的值了

在Vue中封装一个select组件

猜你喜欢