javascript - 如何在element-ui中封装select组件

问题描述

问 题

我在使用element-ui的select组件的时候，遇到如下的情况：我想封装select的远端访问。比如，封装一个可以搜索用户的select组件。参考官网的例子：

<template>
  <el-select
    v-model='value9'
    multiple
    filterable
    remote
    placeholder='请输入关键词'
    :remote-method='remoteMethod'
    :loading='loading'>
    <el-option
      v-for='item in options4'
      :key='item.value'
      :label='item.label'
      :value='item.value'>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options4: [],
        value9: [],
        list: [],
        loading: false,
        states: ['Alabama', 'Alaska', 'Arizona',
          'Arkansas', 'California', 'Colorado',
          'Connecticut', 'Delaware', 'Florida',
          'Georgia', 'Hawaii', 'Idaho', 'Illinois',
          'Indiana', 'Iowa', 'Kansas', 'Kentucky',
          'Louisiana', 'Maine', 'Maryland',
          'Massachusetts', 'Michigan', 'Minnesota',
          'Mississippi', 'Missouri', 'Montana',
          'Nebraska', 'Nevada', 'New Hampshire',
          'New Jersey', 'New Mexico', 'New York',
          'North Carolina', 'North Dakota', 'Ohio',
          'Oklahoma', 'Oregon', 'Pennsylvania',
          'Rhode Island', 'South Carolina',
          'South Dakota', 'Tennessee', 'Texas',
          'Utah', 'Vermont', 'Virginia',
          'Washington', 'West Virginia', 'Wisconsin',
          'Wyoming']
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: item, label: item }
      })
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            this.options4 = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1
            })
          }, 200)
        } else {
          this.options4 = []
        }
      }
    }
  }
</script>

我命名该组件为testSelect。我在我的form中，使用该组件，发现下拉选择的数据，无法被正确选中。谁可以帮忙解决一下，多谢！

解决方案

这个是我封装的一个最简单的下拉组件

gender-selector.vue

<template>
    <el-select placeholder="" :value="value" :size="size" @input="change($event)">
        <el-option :label="showAllTipLabel || '全部'" value="" v-if="showAllTip !== undefined"></el-option>
        <el-option label="男" :value="1"></el-option>
        <el-option label="女" :value="2"></el-option>
    </el-select>
</template>

<script>
    export default {
        props: ['value', 'size', 'showAllTip', 'showAllTipLabel'],
        methods: {
            change: function(val) {
                this.$emit('input', val);
            }
        },
    }
</script>

引入

import genderSelector from '../../components/selector/gender-selector';

然后

components: {
    genderSelector,
},

使用

<gender-selector size="small" v-model="formInfo.gender"></gender-selector>

这篇关于javascript - 如何在element-ui中封装select组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！