Vue国际化三【在下拉框中使用】

select 内容国际化

  <myForm
      :form-config="formConfig"
      :filters="filters"
      @handleChage="handleSearch"
      @handleSearch="handleSearch"
    />


  computed: {

    formConfig() {
      return [
        {
          type: 'input',
          placeholder: this.$t("common.pleaseenter"),
          label: this.$t("usersManager.Username") + '：',
          prop: 'userName'
        },
        {
          type: 'select',
          placeholder: this.$t("common.pleaseenter"),
          label: this.$t("common.status") + '：',
          prop: 'status',
          options: this.convertType
        }
      ]
    },
    convertType() {
      statusList.map(item => {
         if(item.dictValue === '0'){
            item.dictName = this.$t('common/Disable')
        }else{
          item.dictName = this.$t('common/Enable')
      }
      })
      return statusList
    }
  },

// 用户状态
export const statusList = [
  {
    dictId: 0,
    dictName: '停用',
    dictValue: '0',
    dictType: 'status',
    dictDescription: '状态'
  },
  {
    dictId: 1,
    dictName: '启用',
    dictValue: '1',
    dictType: 'status',
    dictDescription: '状态'
  }
]

<template>
  <div>
    <div class="hlt-table-search top-search">
      <el-row :span="24">
        <el-form
          ref="form"
          :model="filters"
          label-width="120px"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item
            v-for="item in formConfig"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
          >
            <el-input
              v-if="item.type === 'input'"
              v-model.trim="filters[item.prop]"
              :placeholder="item.placeholder"
              style=" 260px"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              @clear="handleSearch()"
              @keyup.enter.native="handleSearch()"
            />
            <el-select
              v-if="item.type === 'select'"
              v-model="filters[item.prop]"
              :placeholder="item.placeholder"
              style=" 260px"
              :disabled="item.disabled"
              size="small"
              clearable
              @clear="handleSearch()"
              @change="handleChage()"
            >
              <el-option
                v-for="selectItm in item.options"
                :key="selectItm.dictId"
                :value="selectItm.dictValue"
                :label="selectItm.dictName"
              />
            </el-select>
            <el-date-picker
              v-if="item.type === 'Time'"
              v-model="filters[item.prop]"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              size="small"
              clearable
              style=" 260px"
              @clear="handleSearch()"
            />
          </el-form-item>
          <el-form-item>
            <slot />
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    formConfig: {
      type: Array,
      default: () => []
    },
    filters: {
      type: Object,
      default: () => { }
    },
    selection: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
    }
  },
  watch: {
    formConfig(newValue, oldValue) {
      this.formConfig = newValue
    },
  },
  computed: {
    ...mapGetters(['lang']),
    getLabelWidth() {
      if (this.lang === 'ja' || this.lang === 'en') {
        this.labelWidth = ''
        this.labelWidth = '170px'
      } else {
        this.labelWidth = ''
        this.labelWidth = '120px'
      }
      return this.labelWidth
    }
  },
  methods: {
    handleSearch() {
      this.$emit('handleSearch')
    },
    handleChage() {
      this.$emit('handleChage')
    }
  }

}
</script>

<style  scoped>
.hlt-table-search {
  min-height: 48px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 20px;
  padding: 20px 24px 0;
  background: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  font-feature-settings: "tnum", "tnum";
  font-variant: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
    helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
    segoe ui emoji, segoe ui symbol, noto color emoji;
}
</style>