elementui字典

以下是关于 Element UI 字典功能的整理，结合常见使用场景和官方文档的实践方法：

字典数据绑定

Element UI 的 el-select 组件通常与字典数据结合使用。字典数据格式建议为数组对象，包含 label 和 value 字段：

dictOptions: [
  { label: '启用', value: 1 },
  { label: '禁用', value: 0 }
]

动态渲染下拉框

在模板中使用 v-for 渲染字典数据到 el-select：

<el-select v-model="form.status">
  <el-option
    v-for="item in dictOptions"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

全局字典管理

可创建字典工具类集中管理常用字典，通过 Vue 的 mixin 或 provide/inject 实现共享：

// dictUtils.js
export const statusDict = [
  { label: '待审核', value: 1 },
  { label: '已通过', value: 2 }
]

表单验证配合

结合 Element UI 的表单验证规则使用字典值：

rules: {
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
}

字典标签显示

对于已选值的展示，可使用计算属性转换值到标签：

computed: {
  statusLabel() {
    const item = this.dictOptions.find(d => d.value === this.form.status)
    return item ? item.label : ''
  }
}

动态加载字典

异步获取字典数据时可配合 loading 状态：

async loadDict() {
  this.dictLoading = true
  this.dictOptions = await api.getDict('status')
  this.dictLoading = false
}

表格列渲染

在 el-table-column 中使用字典转换显示：

<el-table-column prop="status" label="状态">
  <template #default="{row}">
    {{ dictOptions.find(d => d.value === row.status)?.label || '-' }}
  </template>
</el-table-column>

多级字典处理

对于层级字典数据（如省市区），可使用 el-cascader 组件：

areaOptions: [
  {
    label: '浙江省',
    value: 1,
    children: [
      { label: '杭州市', value: 11 }
    ]
  }
]

以上方法覆盖了 Element UI 中字典数据的主要应用场景，可根据实际需求组合使用。对于复杂项目，建议采用状态管理工具（如 Vuex 或 Pinia）集中管理字典数据。