vue+Element-ui的el-table的多级内容渲染

将多层内容渲染到表格里面

平常的表格是一个对象里面的数据渲染成一行，对象里面的key就是表格的label，如果对象里面还有对象数组那该怎么去渲染，如渲染下面的数据，将一个对象渲染成一行数据，和平常的table表格的数据渲染不一样，这个不能直接渲染出来，需要加第三方的label来渲染数据

tableData: [
					{
						name: 'Huawei P40',
						properties: [
							{
								description: '颜色',
								value: '红色'
							},
							{
								description: '内存',
								value: '128G'
							}
						]
					},
					{
						name: '小米10',
						properties: [
							{
								description: '颜色',
								value: '黑色'
							},
							{
								description: '内存',
								value: '128G'
							}
						]
					}
				]

代码如下，另外加一个columnIndex数组，用来存储数据里面的属性的key

<template>
	<el-table :data="tableData" border>
		<el-table-column label="手机">
			<template slot-scope="scope">
				<span>{{scope.row.name}}</span>
			</template>
		</el-table-column>
		<el-table-column v-for="(item, index) in columnIndex" :key="index" :label="item">
	        <template slot-scope="scope">
				<span>{{scope.row.properties[index].value}}</span>
			</template>		
		</el-table-column>
	</el-table>
</template>

<script>
	export default {
		data() {
			return {
				// 有两层数据，渲染表格
				columnIndex: ['颜色','内存'],
				tableData: [
					{
						name: 'Huawei P40',
						properties: [
							{
								description: '颜色',
								value: '红色'
							},
							{
								description: '内存',
								value: '128G'
							}
						]
					},
					{
						name: '小米10',
						properties: [
							{
								description: '颜色',
								value: '黑色'
							},
							{
								description: '内存',
								value: '128G'
							}
						]
					}
				]
			}
		}
	}
</script>

<style>
</style>

效果图：可以看到，properties里面的数据也渲染到表格里面了