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: 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="width: 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="width: 260px"
              :disabled="item.disabled"
              size="small"
              clearable
              @clear="handleSearch()"
              @change="handleChage()"
            >
              <el-option
                v-for="selectItm in configList"
                :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="width: 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: {
    configList() {
      let ids = []
      this.formConfig.forEach(val => {
        if (val.type === "select" && val.options.length > 0) {
          val.options.forEach(item => {
            item.dictName = this.$t(‘common.Deactivate‘)
          })
          ids = val.options
        }
      })
      return ids
    }
  },
  created() {
  },
  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>

Vue国际化三【使用】

原文：https://www.cnblogs.com/0520euv/p/14860007.html