在Vue中封装一个select组件

墨蓝 2022-05-19 07:42 1210阅读 0赞

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

  1. <div class='iselect'> <!-- 非多选的情况 --> <i-select v-if='!ismultiple' v-model='selecteddata' :placeholder='placeholdertext' filterable clearable @on-change='getSelectedData' > <i-option v-for ='item in list' :value='item.value' :key='item.id' >{ { item.label}} </i-option> </i-select> <!-- 多选的情况 --> <i-select v-if='ismultiple' v-model='selecteddata' :placeholder='placeholdertext' filterable multiple @on-change='getSelectedData' > <i-option v-for ='item in list' :value='item.value' :key='item.id' >{ { item.label}} </i-option> </i-select> </div> </template> <script> export default { name: 'SelectBox', props: { placeholder: { type: String, required: false, default: 'Select' }, multiple: { type: Boolean, required: false, default: false }, optionlist: Array }, watch: { optionlist (val) { this.list = val } }, data () { return { placeholdertext: this.placeholder, list: [], ismultiple: this.multiple, selecteddata: [] } }, methods: { getSelectedData (value) { this.selecteddata = value this.$emit('getSelectedData', this.selecteddata) } } } </script>

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

  1. <i-select
  2.      :model.sync='selecteddata'
  3.      :placeholder='placeholdertext'
  4.      filterable multiple
  5.      @on-change='getselecteddata'
  6.     >

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

  1. props: {
  2.     placeholder: {
  3.       type: String,
  4.       required: false,
  5.       default: 'Select'
  6.     }
  7.   }

filterable multiple :可搜索，可多选
@on-change=’getselecteddata’： 这个是得到选中的数据！注意必须写为on-change才生效，得到的是数据中value的值，如果想要得到label的值，需要在select 添加label-in-value 得到的是数组对象
我们封装的select组件可以根据用户传入判断是单选还是多选，加一个判断参数，默认是单选的。
异步数据传输子组件监听一下来自父组件数据的变化。
我们得到这个数据需要往父组件中传递，父组件得到参数往后台传递

  1. methods: {
  2.     getselecteddata (value) {
  3.       // console.log(value)
  4.       this.$emit('getSelectedData', value)
  5.     }
  6.   }

value是选中的option构成的数组

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

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

  1. props: { optionlist: Array }

欧克，在父组件中使用：

  1. <select-box
  2.          :optionlist='citylist'
  3.          placeholder='Select City'
  4.          v-on:getdata='getSelectedData'
  5.         ></select-box>

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

  1. citylist: [
  2.         {
  3.           value: 'beijing',
  4.           label: '北京市'
  5.         },
  6.         {
  7.           value: 'shanghai',
  8.           label: '上海市'
  9.         },
  10.         {
  11.           value: 'shenzhen',
  12.           label: '深圳市'
  13.         },
  14.         {
  15.           value: 'hangzhou',
  16.           label: '杭州市'
  17.         },
  18.         {
  19.           value: 'nanjing',
  20.           label: '南京市'
  21.         },
  22.         {
  23.           value: 'chongqing',
  24.           label: '重庆市'
  25.         }
  26.       ]

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

  1. v-on:getdata='getSelectedData'
  2.   ...
  3.   methods: {
  4.     getSelectedData (data) {
  5.       console.log(data)
  6.     }
  7.   }

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

发表评论

表情：
评论列表 （有 0 条评论，1210人围观）

还没有评论，来说两句吧...

相关阅读