elementUi table展示嵌套数据

 后端返回来的数据

 第一层可以直接scope.row拿到,但是第二层如班级那里,需要再用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
今日推荐