如何使用若依解决多选字段的问题——方案二

若依框架多选字段处理方案

原创已于 2025-10-21 22:34:39 修改 · 790 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ruoyi

于 2025-10-18 13:02:09 首次发布

解决方案：使用json类型去作为字段类型进行存储

为什么这两个字段需要使用JSON类型？
在若依框架中如何使用JSON类型字段进行多选？
如何预防导入导出Excel时的异常？

1. 为什么这两个字段需要使用JSON类型？

多选数据存储需求：字段“对应领域”和“教材特色”是可多选的，这意味着每个字段需要存储多个值（例如，[“数学”, “物理”, “化学”]）。使用JSON类型可以高效、结构化地存储数组或对象形式的数据。
查询和处理便利性：JSON类型支持数据库层面的JSON查询（如MySQL的JSON函数），便于后端解析和前端渲染。相比逗号分隔的字符串，JSON减少了数据冗余和解析错误。
若依框架集成：若依框架（RuoYi）自带的工具类（如Excel导入导出）对JSON字段有良好支持，可以通过自定义转换器正确处理多选数据，避免导入导出时格式混乱。

2. 在若依框架中如何使用JSON类型字段进行多选？

以下是实现步骤，涵盖数据库设计、后端实体类、前端组件和工具类配置。

步骤1：数据库设计

将字段设置为JSON类型（以MySQL为例）：

ALTER TABLE your_table 
ADD COLUMN corresponding_field JSON COMMENT '对应领域',
ADD COLUMN textbook_features JSON COMMENT '教材特色';

步骤2：后端实体类配置

在Java实体类中，使用@JsonProperty或自定义类型处理器标记字段为JSON类型。若依默认使用MyBatis，可以通过@TableField注解（如果使用MyBatis-Plus）或自定义类型处理器。

示例实体类：

import com.fasterxml.jackson.annotation.JsonProperty;
import com.ruoyi.common.annotation.Excel;

public class YourEntity {
    // 对应领域（多选）
    @Excel(name = "对应领域", converter = JsonConverter.class) // 自定义Excel转换器
    @JsonProperty("correspondingField")
    private String correspondingField; // 实际存储JSON字符串，如["O00", "O01"]

    // 教材特色（多选）
    @Excel(name = "教材特色", converter = JsonConverter.class)
    @JsonProperty("textbookFeatures")
    private String textbookFeatures; // 如["feature1", "feature2"]

    // Getter和Setter方法
}

步骤3：自定义JSON转换器（用于Excel导入导出）

创建自定义转换器，实现com.ruoyi.common.utils.poi.ExcelHandlerAdapter接口，将JSON数组与字符串互转。

示例转换器类：

import com.alibaba.fastjson.JSON;
import com.ruoyi.common.utils.poi.ExcelHandlerAdapter;
import java.util.Arrays;
import java.util.List;

public class JsonConverter implements ExcelHandlerAdapter {
    @Override
    public Object format(Object value, String[] args) {
        // 导出Excel时：将JSON字符串转换为逗号分隔的字符串
        if (value instanceof String) {
            List<String> list = JSON.parseArray((String) value, String.class);
            return String.join(",", list);
        }
        return null;
    }

    @Override
    public Object parse(Object value, String[] args) {
        // 导入Excel时：将逗号分隔的字符串转换为JSON字符串
        if (value instanceof String) {
            List<String> list = Arrays.asList(((String) value).split(","));
            return JSON.toJSONString(list);
        }
        return null;
    }
}

步骤4：前端多选组件配置

在若依前端（通常使用Vue + Element UI），使用多选组件（如el-select）绑定JSON字段，并通过计算属性或方法处理数据。

示例Vue组件：

<template>
  <el-form-item label="对应领域">
    <el-select v-model="correspondingFieldArray" multiple>
      <el-option label="领域1" value="O00"></el-option>
      <el-option label="领域2" value="O01"></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      form: {
        correspondingField: '', // 存储JSON字符串
        textbookFeatures: ''
      }
    };
  },
  computed: {
    correspondingFieldArray: {
      get() {
        // 将JSON字符串解析为数组
        return this.form.correspondingField ? JSON.parse(this.form.correspondingField) : [];
      },
      set(value) {
        // 将数组转换为JSON字符串
        this.form.correspondingField = JSON.stringify(value);
      }
    }
  }
};
</script>