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>