在线查看qq空间网站_如何制作网站后台_宁波seo在线优化方案公司_天津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;})

🔍 代码解析

1. item.sectorName.split(",")

   • 将 sectorName（字符串 "1,2,3"）拆分为数组 ["1", "2", "3"]。

2. this.sectorList.filter(sector => sectorIdArr.includes(String(sector.id)))

   • 过滤 sectorList，只保留 id 在 sectorIdArr 里的项。

3. .map(sector => sector.name).join("，")

   • 提取 name 并用 ， 连接成字符串。

客户类型 cusTypeNames 处理逻辑类似。

列表直接使用：sectorNameStr 字段渲染即可

效果如下：

至此完成！！！

测试有效！！！感谢支持！！！