<template>
<div class="pg-container">
<el-table
:expand-row-keys="expends"
:row-key="getRowKeys"
:data="tableData"
class="table-class">
<el-table-column prop="name" label="姓名" show-overflow-tooltip min-width="20%">
</el-table-column>
<el-table-column prop="sex" label="性别" show-overflow-tooltip
min-width="10%">
</el-table-column>
<el-table-column prop="phone" label="联系方式" show-overflow-tooltip width="120">
</el-table-column>
<!--注意把带行展开插槽的列元素放在容易隐藏的位置(3)-->
<el-table-column type="expand" class-name="none-col">
<template slot-scope="props">
<!--放扩展行内代码(1)-->
</template>
</el-table-column>
<el-table-column prop="createDate" label="录入时间" show-overflow-tooltip min-width="30%">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
mounted() {
this.getTableData();
},
data() {
return {
//展开行
expends: [],
//表数据
tableData: [],
testData: [
//测试表数据,略
]
}
},
methods: {
//获取表格的行id
getRowKeys(row) {
return row.id
},
//模拟获取表数据的异步函数
getTableData() {
let _this = this;
setTimeout(function () {
_this.tableData = _this.testData;
//设置table中的扩展项-展开行的id(全部展开)(2)
let rowIds = _this.tableData.map(item => {
return item.id
});
_this.expends = rowIds;
}, 2000);
}
}
}
</script>
<style>
.pg-container .table-class td.none-col .el-table__expand-icon--expanded {
/*只能隐藏内容,隐藏整个的单元格要另想办法(3)*/
display: none;
}
.pg-container .table-class td {
/*注意是每个单元格有自己的下边框(4)*/
border-bottom: unset;
}
.pg-container .table-class .el-table__expanded-cell {
padding: 6px 10px 12px 10px;
/*补上扩展行的下边框(4)*/
border-bottom: 1px solid #ebeef5;
}
/* ......其他CSS省略*/
</style>
https://blog.csdn.net/u013269704/article/details/106930485/