网络培训的优点包括什么宁波seo怎么推广
说明：列表中字段A的值由多个值组成，但是后端返回的是这多个值的id字符串，需要前端拿着多个id组成的字符串去另一个接口数据源匹配展示
列表后端返回多个字符串如下：
sectorName: "1899292545382895618,1907311191514636289,1907311228177047553"cusType: "4,2",数据源1(模拟数据)：
sectorList: [{id:1,name:'测试1'},{id:2,name:'测试2'},{id:3,name:'测试3'},{id:4,name:'测试4'}
],数据源2(模拟数据)：
cusTypeList: [{dictKey:1,dictValue:'A'},{dictKey:2,dictValue:'B'},{dictKey:3,dictValue:'C'},{dictKey:4,dictValue:'S'}
],列表接口请求成功之后匹配方法如下：
api.querybasicRftTemplateRetrieveList(params).then((res) => {if(res.data.data == null){this.tableData = []}else{this.tableData = res.data.data.records;this.tablePage.totalElements = res.data.data.total;this.tableData.map((item) => {item.fieldType = String(item.fieldType);// 匹配行业名称if (item.sectorName) {let sectorIdArr = item.sectorName.split(","); // 分割行业 IDitem.sectorNameStr = this.sectorList.filter(sector => sectorIdArr.includes(String(sector.id))).map(sector => sector.name).join("，"); // 拼接成字符串} else {item.sectorNameStr = "";}// 匹配客户类型名称if (item.cusType) {let cusTypeArr = item.cusType.split(","); // 分割客户类型 IDitem.cusTypeNameStr = this.cusTypeList.filter(cus => cusTypeArr.includes(String(cus.dictKey))).map(cus => cus.dictValue).join("，"); // 拼接成字符串} else {item.cusTypeNameStr = "";}})this.getUsersList(this.tableData);}this.loading = false;}).catch(() => {this.loading = false;})🔍 代码解析
-
item.sectorName.split(",")-
将
sectorName（字符串"1,2,3"）拆分为数组["1", "2", "3"]。
-
-
this.sectorList.filter(sector => sectorIdArr.includes(String(sector.id)))-
过滤
sectorList，只保留id在sectorIdArr里的项。
-
-
.map(sector => sector.name).join("，")-
提取
name并用，连接成字符串。
-
客户类型 cusTypeNames 处理逻辑类似。
列表直接使用：sectorNameStr 字段渲染即可
效果如下：
至此完成！！！
测试有效！！！感谢支持！！！