Element ui 选择器封装

组件封装

<template>
  <el-select
    :value="value"
    filterable
    placeholder="请选择"
    size="small"
    :disabled="disabled"
    @input="change($event)"
  >
    <el-option v-for="(zh,en) in allCountry" :key="en" :label="zh" :value="en" />
  </el-select>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Country',
  props: { value: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }},

  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      allCountry: state => state.user.allCountry
    })
  },
  methods: {
    change(val) {
      this.$emit('input', val)
    }
  }
}
</script>

页面引用

<template>
    <country v-model="form.country" :disabled="disabled.country_code.country_code" />
</template>

<script>
import country from '@/components/country'
export default {
  name: 'ModifyRate', 
  components: { country }
  }
}
</script>