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]
    }
  }
}

代碼粗糙 大神們自己優化