<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/