elementui字典
ElementUI 字典功能实现
ElementUI 本身不提供专门的字典组件，但可以通过 Select、Radio、Checkbox 等组件结合后端数据实现字典功能。以下是常见实现方法：
数据绑定与渲染
通过 v-for 动态渲染字典选项，以 Select 组件为例：
<el-select v-model="form.dictValue" placeholder="请选择">
<el-option
v-for="item in dictOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>字典数据管理
建议将字典数据统一管理，例如在 Vuex 或独立服务中维护：
// 示例字典数据格式
const dicts = {
gender: [
{ label: '男', value: '1' },
{ label: '女', value: '2' }
],
status: [
{ label: '启用', value: '1' },
{ label: '禁用', value: '0' }
]
}动态加载字典
通过 API 异步获取字典数据：
export function getDictData(dictType) {
return axios.get(`/api/dict/${dictType}`)
}
// 组件内调用
async loadDict() {
this.dictOptions = await getDictData('gender')
}全局字典过滤器
注册全局过滤器方便显示字典标签：
Vue.filter('dictLabel', (value, dictType) => {
const dict = dicts[dictType]
const item = dict.find(item => item.value === value)
return item ? item.label : value
})
// 使用示例
<span>{{ form.gender | dictLabel('gender') }}</span>TypeScript 支持
为字典数据定义类型：
interface DictItem {
label: string
value: string | number
disabled?: boolean
}
type DictType = Record<string, DictItem[]>性能优化建议
- 对高频使用的字典数据进行缓存
- 批量请求字典数据减少接口调用
- 使用 Vuex 或 Pinia 管理共享字典状态
