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]
    }
  }
}
复制代码

代码粗糙 大神们自己优化

posted @   9102  阅读(4777)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 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)
点击右上角即可分享
微信分享提示