elementUi テーブルにはネストされたデータが表示されます

 バックエンドから返されたデータ

 最初の層はscope.rowによって直接取得できますが、クラスなどの2番目の層はv-forを使用してscope.row.usersを走査して取得する必要があります。

<el-table :data="tableData" style="width: 100%">
	<el-table-column label="id" width="50" align="center">
		<template slot-scope="scope">
			<span style="margin-left: 10px">{
   
   { scope.row.id }}</span>
		</template>
	</el-table-column>
	<el-table-column label="社团名称" width="100" align="center">
		<template slot-scope="scope">
			<span style="margin-left: 10px">{
   
   {scope.row.communityName}}</span>
		</template>
	</el-table-column>
	<el-table-column label="申请人" width="100" align="center">
		<template slot-scope="scope">
			<span style="margin-left: 10px">{
   
   { scope.row.founder }}</span>
		</template>
	</el-table-column>
	<el-table-column label="班级" width="150" align="center" >
		<template slot-scope="scope">
			<span v-for="(item, i) in scope.row.users" :key="i">{
   
   {item.className}}</span>
		</template>
	</el-table-column>
</el-table>

おすすめ

転載: blog.csdn.net/leraning_/article/details/128829663