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

官方文档中展示：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>

```