当前位置：首页 > news >正文

列表某个字段由多个值组成，使用id匹配展示

news 2025/7/6 11:45:23

说明：列表中字段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(","); // 分割行业 ID
                            item.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(","); // 分割客户类型 ID
                            item.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 并用 ， 连接成字符串。