标签：vue String 回显 jsonArray 选择器 nations id nationStr

在表单中引入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);
            }

标签：vue,String,回显,jsonArray,选择器,nations,id,nationStr
来源： https://www.cnblogs.com/sgj191024/p/16576178.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。