vue若依框架dicts中字典项的使用：表格展示与下拉框示例

在若依框架的开发中，字典项的使用可以帮助我们更方便地管理和展示一些具有固定取值范围的数据，比如颜色类型、人员类型等。下面将详细介绍若依框架中字典项在表格和下拉框中的使用方法。

1. 若依字典项的配置

在若依框架中，我们首先需要在系统管理 - 字典管理中配置所需的字典。假设我们要配置两个字典：颜色（color）和人员类型（personnel_type）。具体配置如下：

颜色字典（`color`）

字典标签	字典值
红色	1
蓝色	2
绿色	3

人员类型字典（`personnel_type`）

字典标签	字典值
管理员	1
普通用户	2
访客	3

2. 在页面中引入字典

在 Vue 组件中，我们可以通过 dicts 属性引入需要使用的字典。示例代码如下：

复制代码

<template>
  <div>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        :label="$t('h.ProductionColor')"
        align="center"
        prop="color"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.color" :value="scope.row.color">
          </dict-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('h.personnelType')"
        align="center"
        prop="userType"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.personnel_type" :value="scope.row.userType">
          </dict-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 下拉框部分 -->
    <el-form :model="formData" ref="formDataRef" label-width="120px">
      <el-form-item label="选择颜色">
        <el-select v-model="formData.color" placeholder="请选择颜色">
          <el-option
            v-for="item in dict.type.color"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择人员类型">
        <el-select v-model="formData.userType" placeholder="请选择人员类型">
          <el-option
            v-for="item in dict.type.personnel_type"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { color: "1", userType: "2" },
        { color: "2", userType: "1" }
      ],
      formData: {
        color: "",
        userType: ""
      },
      dicts: ["color", "personnel_type"]
    };
  },
  computed: {
    dict() {
      return this.$store.state.dict;
    }
  }
};
</script>

表格部分

在表格中，我们使用 dict-tag 组件来展示字典项。dict-tag 组件接收两个主要参数：

options：字典项的列表，通过 dict.type.color 或 dict.type.personnel_type 获取。
value：当前行数据对应的字典值，通过 scope.row.color 或 scope.row.userType 获取。

下拉框部分

在下拉框中，我们使用 el-select 和 el-option 组件来实现选择功能。通过 v-for 指令遍历字典项列表，将每个字典项的 dictLabel 作为显示标签，dictValue 作为实际值。

数据获取

通过 computed 属性 dict 从 Vuex 中获取字典数据，确保在组件中可以方便地使用字典项。