前端vue用select选择器多选，保存选中的选项到数据库，然后进行回显

在表单中引入select选择器

<el-form-item :label="$t('lang.contentManage.asean')" prop="nations">
          <el-select v-model="form.nations" multiple :placeholder="$t('lang.contentManage.nationPlaceholder')">
            <el-option
              v-for="item in nationOptions"
              :key="item.id"
              :label="item.asean"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

　　

data中定义一下，这个就是我们从后端查询出的多条记录，然后在选择器中显示

nationOptions:[],

　　然后我们选中多条选项时，会在前端生成一个数组，数组中是选中选项的id,然后我们转成json字符串让后端保存，

this.form.nations = JSON.stringify(this.form.nations)

　　后端定义为String

private String nations;

　　因为我们保存的类似于这种数据  "[1,2,3]"

所以我们要把里面的id取出来，然后根据id查询它对应的名称,然后拼接成   "张三，李四，王五"这样的字符串给前端，这样方便展示。

这里定义一个dto,用来展示选中的选项的id对应的名称，这里需要在查询数据的时候先在后端处理一下，这样前端就可以拿着这个新的字段进行展示了

String nations = portalMenuContent1.getNations();
            if(nations != null){
                JSONArray jsonArray = JSONObject.parseObject(nations,JSONArray.class);
                String nationStr = "";
                for (int i = 0; i < jsonArray.size(); i++) {
                    //System.out.println(jsonArray.get(i));
                    Object o = jsonArray.get(i);
                    long id = Long.parseLong(o.toString());
                    CooperateTopics cooperateTopics = portalMenuContentMapper.selectTopicsById(id);
                    String asean = cooperateTopics.getAsean();
                    nationStr += asean;
                    if(i != jsonArray.size() -1){
                        nationStr += ",";
                    }
                }
                portalMenuContentDto.setNationsName(nationStr);
            }