vue3将列表外键ids显示为对应names

<el-table-column label="服务组织" align="center" prop="serviceOrganization" width="170px">
        <template #default="scope">
            <span>{{ serviceOrganizationName(scope.row.serviceOrganization) }}</span>
          </template>
      </el-table-column>

 我这里传递的参数为ids，多个外键用“,”隔开拼成的字符串

上面为

//计算属性,将列表服务组织ids转换为汉字
const serviceOrganizationName = (ids) => {
  const data1=serviceOrganization.value 
//serviceOrganization.value是我在初始化时调用后端Api接口给出的数据
//是个list集合里面包含id，和serviceOrganization也就是要显示的名称
  const data=data1.list
    console.log(toNames(ids,data));
  return toNames(ids,data)
}
//ids转换为names
const toNames=(ids,list)=>{
//将字符串转为数组
  const idarr=ids.split(',');
  let Names;
  for (let index = 0; index < idarr.length; index++) {
    for (let index1 = 0; index1 < list.length; index1++) {
      if (list[index1].id === idarr[index]) { 
          if(index==0){
            Names=list[index].serviceOrganization//这里改为你的字段名
          }
          else {
            Names+=","+list[index].serviceOrganization
          }
        }  
    }
  }   if(Names=='')
  return "无"
      return  Names
}

显示效果