将字符串连接到字典元素的值的更好方法是什么？

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(", ")

以上内容适用于任意数量的列。