expandedRowKeys、expandedRowsChange、expand
这里主要是记录用expandedRowKeys来控制展开关闭和展开参数设置
页面效果
标签参数(效果主要参数:@onExpand="onExpand" :expandedRowKeys="expandedRowKeys" slot="expandedRowRender")
官方API:https://www.antdv.com/components/table-cn/#api
<a-table ref="table" size="default" rowKey="orderWorkerId" :columns="columns" :multiple="false" :operator="operator" :params="queryParam" :api="api.hzlorderworker" @onExpand="onExpand" :expandedRowKeys="expandedRowKeys" > <a-table rowKey="orderWorkerId" slot="expandedRowRender" slot-scope="text,record" :columns="innerColumns" :dataSource="detailsData" :pagination="false" style="padding: 2px;border: none" size="middle" :bordered="false"> </a-table> </a-table>
vue
export default { data () { return { ...., // 展开的行,控制属性 这里控制 expandedRowKeys: [], detailsData: [] } } methods: { onExpand (expanded, record) { if (expanded) { // 初始化展开值 this.detailsData = [] // 初始化关闭所有展开窗 this.expandedRowKeys = [] // 设置展开参数 this.detailsData.push(record) // 设置展开窗Key this.onExpandedRowsChange(record) } else { this.expandedRowKeys = [] } }, onExpandedRowsChange (rows) { this.expandedRowKeys = [rows.orderWorkerId] } } }
代码粗糙 大神们自己优化