1. el-select组件封装
<template>
<el-select
v-model="status"
:style="{
width:width
}"
:placeholder="placeholder"
clearable
@change="onchange"
>
<el-option
v-for="item in EnumList"
:key="item.value"
:label="item.label || item.dictName"
:value="Number(item.value) || Number(item.dictKey)"
/>
</el-select>
</template>
<script>
import { getenumList } from '@/api/public'
export default {
name: 'EnumSelect',
props: {
placeholder: {
type: String,
default: '状态'
},
paramname: {
type: String,
default: 'status'
},
code: {
type: String,
default: ''
},
/**
* 是否需要网络请求
* */
fetchType: {
type: Boolean,
default: true
},
width: {
type: String,
default: ''
},
list: {
type: Array,
default: () => {
return []
}
},
dictKey: {
type: String,
default: ''
}
},
data() {
return {
status: '',
EnumList: [],
newCode: ''
}
},
watch: {
dictKey: {
handler(newV) {
this.status = newV ? Number(newV) : ''
},
deep: true,
immediate: true
},
code: {
handler(newV) {
this.newCode = newV
},
deep: true,
immediate: true
}
},
created() {
if (!this.fetchType) {
this.EnumList = this.list
} else {
this.fetchEnumListData()
}
},
methods: {
async fetchEnumListData() {
const res = await getenumList(this.newCode)
if (res.code === 200) {
this.EnumList = res.data
}
},
onchange(e) {
this.$emit('useEnumSelect', { paramname: this.paramname, value: this.status })
}
}
}
</script>
2.父组件调用示例
<template>
<div class="dialog">
<EnumSelect
placeholder="请选择"
paramname="paramname"
code="code"
:dict-key="String(dictKey)"
@useEnumSelect="useEnumSelect"
/>
</div>
</template>
<script>
import EnumSelect from '@/components/EnumSelect'
export default {
components: {
EnumSelect
},
data() {
return {
dictKey: '',
form: {
paramname: ''
}
}
},
methods: {
useEnumSelect(data) {
this.form[data.paramname] = data.value
}
}
}
</script>