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 @ 2020-01-10 16:37  9102  阅读(4717)  评论(0编辑  收藏  举报