el-table实现el-table-column可展开效果
el-table通过default-expand-all来默认是否为展开效果。
el-table-cloumn添加type="expand"即为展开效果。
//控制是否是可以展开的行：
<el-table
ref="multipleTable"
:data="policyFileList"
default-expand-all>//默认为展开
<el-table-column type="expand">
<!--展开的内容为一个table-->
<template slot-scope="props">
<el-table
:data="props.row.userDeclarepAttachmentList"
stripe
style="width: 100%"
:show-header="false">
...
</teplate>
</el-table-cloumn>
</el-table>
优化点击效果
原来只能点击对应的小箭头位置才能展开对应的行，使用下面代码后可以在对应行点击都可以实现展开效果。
<el-table
ref="multipleTable"
:data="policyFileList"
default-expand-all
@row-click="rowClick">
<el-table-column type="expand">
....
</el-table-cloumn>
</el-table>
//优化点击展开
rowClick(row, event, column) {
this.$refs.multipleTable.toggleRowExpansion(row)
},
当对应的行没有数据的时候不显示展开箭头并且为不可以展开的效果
通过动态判断当前渲染的行的数据是否存在，不存在则进行对展开箭头的隐藏控制。
<el-table
ref="multipleTable"
:data="policyFileList"
default-expand-all
@row-click="rowClick"
:row-class-name="getRowClass">
<el-table-column type="expand">
....
</el-table-cloumn>
</el-table>
// 判断表格是否有子项，无子项不显示展开按钮
getRowClass(row, rowIndex) {
if (row.row.userDeclarepAttachmentList.length === 0) {
return 'row-expand-cover'
}
},
//没有子项的时候不显示展开的小箭头
/deep/ .el-table .row-expand-cover .cell .el-table__expand-icon {
display: none;
}
存在的问题
因为默认使用了default-expand-all导致初始加载的时候就已经把没有数据的也展开了。上面的隐藏只是把箭头隐藏，但还是可以实现展开的效果。
解决：
