基于el-table进行行内详情查看

官方文档中展示：https://element.eleme.cn/#/zh-CN/component/table#zhan-kai-xing

1.关于 中的属性、事件以及方法

- Attributes：属性，设置在<el-table> 中，用于控制表格的数据源、尺寸、样式等；
- Events：事件，设置在<el-table> 中，用于对表格点击触发的事件作出自定义操作，如单选、多选、行点击等；
- Methods：方法，不需设置在<el-table> 中，通过DOM 操作来执行对应表格中的方法，如排序、过滤等；

2.使用row-click(Event)与toggleRowExpansion(Method) 实现表格行内展开查看详情

<template>
	<el-table ref='table' :data="tableData" @row-click="rowClick">
		<el-table-column type="expand">
		<!-- 行内展开展示行（行内展开必填） -->
			<template slot-scope="{row}">
			<!-- 作用域插槽，获取当前行数据 -->
            	<el-form label-position="left" inline class="demo-table-expand">
            		<el-form-item :label="name" v-for="(value, name) in row" :key="idx">
            		<!-- 遍历行数据对象 -->
                  		<span>{{ value }}</span>
                  	</el-form-item>
                </el-form>
            </template>
		</el-table-column>
	</el-table>
</template>
<script>
	export default {
		data(){
			return{
				// 列表数据
				tableData: [],
				// 方案三，自闭合控制参数，id-当前行唯一标识，expanded-展开状态
				curRow: {
					id: 0,
					expanded: false
				}
			}
		},
		methods: {
			/**
			* method: rowClick(row, column, event) - 行点击事件
			* param: row - 获取当前点击行的数据
			* param: column - 当前行的列属性
			* params: event - 当前点击对象，event.target可获取当前元素
			* ---
			* method: toggleRowExpansion(row, expanded) - 切换某一行的张开状态
			* param: row - 行数据，在作用域插槽中获取并渲染
			* param: expanded - 展开状态（true-展开 false-闭合）
			*/
			rowClick(row, column, event){
				// * 方案一：点击该行，该行内容展开，局限是不支持闭合
				// this.$refs['table'].toggleRowExpansion(row, true);
				// * 方案二：点击该行，闭合其他行，局限是不支持当前行自闭合
				this.tableData.forEach(e=>{
					this.$refs['table'].toggleRowExpansion(e, false);
				});
				this.$refs['table'].toggleRowExpansion(row, true);
				// * 方案三：解决方案二自闭合问题
				// let expand = curRow.id == row.id ? !curRow.expanded && false : true;
				// this.tableData.forEach(e=>{
				//	this.$refs['table'].toggleRowExpansion(e, false);
				// });
				// this.$refs['table'].toggleRowExpansion(row, expand);
				 
				
			}
		}
	}
</script>