前端添加把数组转为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;
}
});
},
自己记录,勿喷!!!!!!!