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] } } }
代码粗糙 大神们自己优化
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)