学无先后,达者为师

网站首页 编程语言 正文

前端添加把数组转为String,后端查询显示把String拆分为数组

作者:qq_50031016 更新时间: 2022-03-04 编程语言

前端添加把数组转为String,后端查询显示把String拆分为数组

首先,把页面准备好,我用的是iview中的

在这里插入图片描述

**

 - <template>
       <Transfer
           :data="data1"
           :target-keys="targetKeys1"
           :render-format="render1"
           @on-change="handleChange1"></Transfer> </template> <script>
       export default {
           data () {
               return {
                   data1: this.getMockData(),
                   targetKeys1: this.getTargetKeys()
               }
           },
           methods: {
               getMockData () {
                   let mockData = [];
                   for (let i = 1; i <= 20; i++) {
                       mockData.push({
                           key: i.toString(),
                           label: 'Content ' + i,
                           description: 'The desc of content  ' + i,
                           disabled: Math.random() * 3 < 1
                       });
                   }
                   return mockData;
               },
               getTargetKeys () {
                   return this.getMockData()
                           .filter(() => Math.random() * 2 > 1)
                           .map(item => item.key);
               },
               render1 (item) {
                   return item.label;
               },
               handleChange1 (newTargetKeys, direction, moveKeys) {
                   console.log(newTargetKeys);
                   console.log(direction);
                   console.log(moveKeys);
                   this.targetKeys1 = newTargetKeys;
               }
           }
       }

**
</script>

1. 点击源列表,点击>键,可以选一个或多个,点击保存, console.log(moveKeys);这个是目的列表中选中的项


##  lowercode:this.moveKeys.join(",")

,  把数组转为String,用,隔开
```之后的添加正常写代码就可以传入数据库了,

 **2.** **通过后台查询显示,把String拆分为list的话用split**
  

## Service层

 @Transactional(rollbackFor = Exception.class)
    public VBObjectRelate QueryObjectChildsByCode(String code){
        Optional<ObjectRelateentity> byId = objectRelateRepository.findById(code);
        VBObjectRelate map = mapper.map(byId.get(), VBObjectRelate.class);
        String[] split = map.lowercode.split(",");
        List<String> namaList = new ArrayList<>();
        for (String item:split ) {
            VBObject object = service.get(item);
            namaList.add(object.name);
        }
        map.lowercode = namaList.toString();
        return  map;
    }

## Controller层
 @PostMapping("/query/{code}")
    public VBResponseResutDTO Query(@PathVariable String code){
        VBObjectRelate vbObjectRelate = vbObjectRelateService.QueryObjectChildsByCode(code);
        return  new VBResponseResutDTO(mapper.map(vbObjectRelate,ObjectRelateDao.class));
    }

**## 前端代码**

     

query(code) {
this.tableData=[];
this.$http.post("/api/bdmp/objectRelate/query/"+this.querycode).then(res => {
if(res!=undefined){
let arr=[];
res.data.lowercode.split(",").forEach(element => {
arr.push({
upcode:res.data.upcode,
name:element,
deleted:res.data.deleted,
createtime:res.data.createtime
})
});
this.tableData = arr;
}
});
},

自己记录,勿喷!!!!!!!

原文链接:https://blog.csdn.net/qq_50031016/article/details/112787723

栏目分类
最近更新