利用Element-UI提供的表格組件做成手風(fēng)琴效果, 即同時(shí)只能有一個(gè)行展開
效果展示
版本說明
"vue": "^2.6.11",
"element-ui": "^2.13.0"
實(shí)現(xiàn)思路
準(zhǔn)備工作
mock了兩個(gè)靜態(tài)數(shù)據(jù): classList 和 studentMap , 分別表示班級(jí)列表, 班級(jí)-學(xué)生列表映射關(guān)系.
在表格中注入 @expand-change展開事件的處理函數(shù)handleExpandChange, 該事件觸發(fā)會(huì)默認(rèn)傳入兩個(gè)參數(shù): row, expandedRows, 第一個(gè)參數(shù)是當(dāng)前觸發(fā)展開事件的行數(shù)據(jù), 第二個(gè)參數(shù)是當(dāng)前表格中處于展開狀態(tài)的全部行數(shù)據(jù).
點(diǎn)擊班級(jí)的行展開的時(shí)候, 我們可以通過回調(diào)參數(shù)row中的班級(jí)id標(biāo)記currentClassId, 這樣就可以找到對(duì)應(yīng)studentMap中該班級(jí)的學(xué)生列表, 渲染班級(jí)學(xué)生表并展開.
思路分析
首先看官方文檔并沒有提供表格手風(fēng)琴相關(guān)的配置參數(shù), OK, 那說明既然各種修改數(shù)據(jù)似乎都不行, 那么我想這個(gè)展開和收起一定是有觸發(fā)的事件, 這么一思考, 我想到Vue的$refs屬性獲取到所有已聲明注冊(cè)過 ref 的所有的子組件, 那么我試試看是否可以拿到表格的實(shí)例, 來看看是否有相應(yīng)的事件.
在handleExpandChange中定義一個(gè)table組件引用const $classTable = this.$refs.classTable, debug一下, 果然能拿到實(shí)例:
點(diǎn)開實(shí)例, 直接看方法, 關(guān)注expand字樣, 果然被我找到了 -
toggleRowExpansion, 該方法支持兩個(gè)參數(shù), 第一個(gè)是row: 行數(shù)據(jù), 第二個(gè)是boolean值, 如果true就展開, false就閉合, 那么直覺上就大有可為.
實(shí)現(xiàn)代碼
<template>
<el-table ref="classTable" :data="classList" style="width: 100%" @expand-change="handleExpandChange">
<el-table-column type="expand">
<template slot-scope="props">
<el-table :data="studentMap[props.row.id]" style="width: 100%">
<el-table-column label="學(xué)號(hào)" align="center">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column label="學(xué)生姓名" align="center">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="年齡" align="center">
<template slot-scope="scope">{{ scope.row.age }}</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="班級(jí)編號(hào)" align="center">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column label="班級(jí)簡(jiǎn)稱" align="center">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="班級(jí)全稱">
<template slot-scope="scope">{{ scope.row.fullName }}</template>
</el-table-column>
<el-table-column label="班主任" align="center">
<template slot-scope="scope">{{ scope.row.teacher }}</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'Table',
data() {
return {
currentClassId: '',
classList: [],
studentMap: {},
getRowKey(row) {
console.log(row.id)
return row.id
}
}
},
created() {
this.fetchClassList()
this.fetchStudentClassMap()
},
methods: {
fetchClassList() {
this.classList = [{
id: 'class-1',
name: '軟工1班',
teacher: '于老師',
fullName: '軟件工程學(xué)院-軟件工程-1班'
}, {
id: 'class-2',
name: '計(jì)科1班',
teacher: '張老師',
fullName: '軟件工程學(xué)院-計(jì)算機(jī)科學(xué)技術(shù)-1班'
}, {
id: 'class-3',
name: '軟工2班',
teacher: '李老師',
fullName: '軟件工程學(xué)院-軟件工程-2班'
}, {
id: 'class-4',
name: '工商1班',
teacher: '錢老師',
fullName: '商學(xué)院-工商管理-1班'
}]
},
fetchStudentClassMap() {
this.studentMap = {
'class-1': [
{
id: '20200101',
name: '小范',
age: 18
}, {
id: '20200102',
name: '小王',
age: 19
}, {
id: '20200103',
name: '小李',
age: 19
}
],
'class-2': [
{
id: '20200201',
name: '小左',
age: 18
}, {
id: '20200202',
name: '小夏',
age: 19
}
],
'class-3': [
{
id: '20200301',
name: '小丁',
age: 18
}, {
id: '20200302',
name: '小楊',
age: 19
}
],
'class-4': [
{
id: '20200401',
name: '小許',
age: 18
}
]
}
},
handleExpandChange(row, expandRows) {
const $classTable = this.$refs.classTable
if (expandRows.length > 1) {
expandRows.forEach(expandRow => {
if (row.id !== expandRow.id) {
$classTable.toggleRowExpansion(expandRow, false)
}
})
}
this.currentClassId = row.id
}
}
}
</script>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
