Какой лучший способ присоединить строку к значению элемента словаря?

Question

Найдите лучший способ решить мой вопрос ~

Вот мои tableData и tableColumns:

tableData:

  [{
    "A":[{"id":0,"name":"aName1"}],
    "B":[{"id":0,"name":"bName1"},{"id":2,"name":"bName2"}],
    "C":[{"id":0,"name":"cName1"},{"id":2,"name":"cName2"}，{"id":3,"name":"cName3"}],
  }]

tableCoulumns:

  [
    {"key":"A", "title":"test1"},
    {"key":"B", "title":"test2"},
    {"key":"C", "title":"test3"}
  ]

<el-table :data="tableData">
   <el-table-column v-for="column in tableCoulumns" :prop="column.key" :label="column.title">
      <template scope="scope">
         <div v-if="scope.row[column.key].length === 1">
            <span v-html="scope.row[column.key][0]['name']"></span>
         </div>
         <div v-else-if=" scope.row[column.key].length>1 && scope.row[column.key].length<=2">
            <span v-html="scope.row[column.key][0]['name'] + '、'+scope.row[column.key][1]['name']"></span>
         </div>
         <div v-else-if="scope.row[column.key].length !== 0 && scope.row[column.key].length>2">
             <span v-html="scope.row[column.key][0]['name'] + '、'+scope.row[column.key][1]['name']+'&&&&'"></span>
         </div>
       </template>
   </el-table-column>
</el-table>

ожидаемые результаты:

Answer 1

  scope.row[column.key].map(it => it.name).join(", ")

Выше будет работать для любого количества столбцов.