在使用element ui的表格（table）时，有时候想要在每一行下面增加一个展开行，效果如下：

当展开行中的内容为静态数据或者是随着表格中的数据一起返回的，这个时候渲染是没有问题的。但是当展开行中的内容为根据表格行中数据单独请求接口而返回的，此时则会出现问题：请求到的数据，第一次不会渲染出来，但是当点击其他行在此请求数据时，则会将上一次请求到的数据渲染出来。

出现问题的原因：在数据返回前，表格expand的dom就已经渲染结束

解决问题：

（方法1）: 体验不好，可以解决问题，所以不推荐！ 可以在expand 展开的template 上加一个v-if，当expand接口请求完成之后，将这个字段设置为true。从而渲染dom。

（方法2）我们可以在返回table数据的每一个对象中，增加一个字段：expand。然后在展开行接口返回数据后，更新表格每一行中的这个expand字段，从而使dom更新。

<template>
	<el-table
	:data="tableData"
	@expand-change="getExpandData"
	style="width: 100%">
		<el-table-column type="expand">
			<template slot-scope="props">
	
				<el-form label-position="left" inline class="demo-table-expand">
				
				<el-form-item label="商品名称">
				
				<span>{{ props.row.expand.name }}</span>
				
				</el-form-item>
			
				<el-form-item label="商品 ID">
			
				<span>{{ props.row.expand.id }}</span>
				
				</el-form-item>
				
				</el-form-item>
				
				</el-form>
	
		</template>
	
	</el-table-column>
	
	<el-table-column
		label="商品 ID"
		prop="id">
	</el-table-column>
	
	</el-table>

</template>

<script>

export default {
	data() {
		return {
			tableData: []
		}
	},	
	methods: {
		getTableData(){
		// 从接口获取到 tableData
		let res = await get('./getTableData')
		for (let item of result) {
		item.expand = ""; // 增加这一个字段，是为了解决：在增加展开行时，由于请求完成时，dom已经渲染了，导致请求到的数据不会重新渲染。如果可以和后端协调，从而增加这个字段，则这一步就可以省略
		}
	},
	getExpandData(row, dataArray){
		let res = await get('./getExpandData') //从接口获取到expand到数据
		row.expand = res;
		//如果想判断 点击事件是展开还是合并，可以通过如下方法判断
		if(dataArray.indexOf(row) !== -1){
			//expand 展开
		}else{
			//expand 关闭
		}
	}
}
}
</script>