官方文档中展示:https://element.eleme.cn/#/zh-CN/component/table#zhan-kai-xing
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200619154133935.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg2NzA2MQ==,size_16,color_FFFFFF,t_70)
##### 1.关于
- Attributes:属性,设置在
- Events:事件,设置在
- Methods:方法,不需设置在
##### 2.使用row-click(Event)与toggleRowExpansion(Method) 实现表格行内展开查看详情
```javascript
{{ value }}
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);
}
}
}
```