效果图如下:
对 element-ui Table 组件进行展开/收缩 icon 添加到 状态列表选项中。同时点击整行单元格进行展开/收缩。
1.首先取消点击展开/收缩 icon,改为点击整行列表进行展开/收缩。
添加整行点击事件 row-click:
<el-table
ref="enquiryUnfinished"
border
:data="searchList.rows"
:row-class-name="tableRowClassName"
@expand-change="handleExpandChange"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
>
......
</el-table>
判断单击单元格未非操作那一列时,进行展开/收缩。
async handleRowClick (row, index, e) {
if (index.label !== '操作') {
this.$refs.enquiryUnfinished.toggleRowExpansion(row)
}
},
2.使用 expand-change 事件获取所有展开行的信息。
expandedId 为所有展开的数据 id。
async handleExpandChange (row, expandedRows) {
this.expandedId = expandedRows.map(item => { return item.id })
if (this.expandedId.includes(row.id)) {
const { data } = await enquiry.getQueryQuoteList({ inquiryId: row.id })
row.queryQuoteList = data
}
},
3.如何隐藏 展开/收缩 的 ICON 列。
设置了<el-table-column type="expand" width="1"></el-table-column>,再隐藏 ICON。
.el-table .el-table__expand-icon {
opacity: 0;
}
4.如何添加展开/收缩 ICON 到某一列中。
<el-table
ref="enquiryUnfinished"
border
:data="searchList.rows"
>
<el-table-column type="expand" width="1">
<template slot-scope="scope">
<el-table
v-if="scope.row.status === 2"
:data="scope.row.queryQuoteList"
border
>
......
</el-table>
</template>
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="90px"
>
<template slot-scope="scope">
<span :class="getClassCommonStatus(scope.row.status)" />
{{ scope.row.status | enumeration(enquiryData.status) }}
<span v-if="scope.row.status === 2">
<i :class="expandedId.includes(scope.row.id) ? 'el-icon-arrow-down': 'el-icon-arrow-right'"></i>
</span>
</template>
</el-table-column>
</el-table>
5.对于 Table 组件的表头,可能由多个字段组成,那么如何自定义表头呢?
element-ui 通过设置 Scoped slot 来自定义表头。
<el-table-column
prop="id"
label="询价单号 来源单号"
>
<template slot="header">
<div>
<div>询价单号</div>
<div>来源单号</div>
</div>
</template>
<template slot-scope="scope">
<p>{{ scope.row.id }}</p>
<p>{{ scope.row.sourceNo }}</p>
</template>
</el-table-column>