官方文档中展示：https://element.eleme.cn/#/zh-CN/component/table#zhan-kai-xing
##### 1.关于<el-table> 中的属性、事件以及方法
- Attributes：属性，设置在<el-table> 中，用于控制表格的数据源、尺寸、样式等；
- Events：事件，设置在<el-table> 中，用于对表格点击触发的事件作出自定义操作，如单选、多选、行点击等；
- Methods：方法，不需设置在<el-table> 中，通过DOM 操作来执行对应表格中的方法，如排序、过滤等；
##### 2.使用row-click(Event)与toggleRowExpansion(Method) 实现表格行内展开查看详情
```javascript
<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>
```
