ruoyi框架字典的使用

1. 字典定义： 略。

2. 前端限定多选框只能是字典中的选项。这样选择好后，发送给后端的值就是我们字典中定义的值了。

然后在多选框中使用字典。

比如我在el-form中，这样使用：

        <el-row>
          <el-col :span="11">
            <el-form-item label="数据业务类型" prop="businessType">
              <el-select v-model="form.businessType" placeholder="请选择数据业务类型" clearable :disabled="true">
                <el-option v-for="dict in dict.type.data_asset_business_type" :key="dict.value" :label="dict.label"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11">
            <el-form-item label="指标数据名称" prop="businessScenario">
              <el-select v-model="form.businessScenario" placeholder="请选择指标数据名称" clearable :disabled="true">
                <el-option v-for="dict in dict.type.data_asset_business_scenario" :key="dict.value" :label="dict.label"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

3. 最关键的来了，我们如何根据后端传过来的字典的值得到字典中的label显示在前端呢。

1. 首先定义一个方法。dictType就是我们要传入的字典，dictValue就是字典的值。返回值就是该字典中值对应的label。

  methods: {
    // 值 到 label的映射
    getDictLabel(dictType, dictValue) {
      for (let dict of dictType){
        console.log(dict);
        if (dict.value == dictValue){
          return dict.label;
        }
      }
      return " ";
    },

    // ... other methods

}

          <el-table-column label="审核状态" align="center" key="auditStatus" prop="auditStatus" v-if="columns[8].visible"
                           :show-overflow-tooltip="true">
            <!-- 根据字典转换 -->
            <template v-slot="slotProps">
               {{ getDictLabel(dict.type.data_asset_audit_status ,slotProps.row.auditStatus) }}
            </template>
          </el-table-column>

这样就完成了！

写给自己看的，就比较简略了。。。