antDesign树形表格或者额外展开行-子父级表格默认展开行

antDesign子父级表格设置默认展开行

方案1：使用defaultExpandAllRows和 v-if来实现

// 需要加个v-if="tableData.length>0"
<a-table
        v-if="tableData.length>0"
        :defaultExpandAllRows="true">
 
// 获取列表时添加延迟函数
 setTimeout(() => {
           this.tableData= res.data.list
          }, 0)

缺点：在使用v-if后，如果列表没数据，列表不展示

方案2：(记得tablekey是一个动态的 可以绑定一个获取详情刷新的值)
给Table设置一个key，获取数据之后改变这个key值，借助了key改变自动变成新的component可以解决这个问题。

// 增加 key
<a-table
  :key="tableKey"
  :defaultExpandAllRows="true"
  :columns="columns"
  :row-key="(record, index) => record.id"
  :data-source="tableData"
>

缺点：要时刻监听列表的所有变化（新增，删除。操作，检索等）一系列影响到表格变化的操作，变化时动态变化tableKey 

方案3：使用expandedRowKeys自定义默认展开行 --- 推荐

使用了expandedRowKeys默认展开行后，点击展开收起事件失效，需要监听expanded手动实现收起和展开

      <a-table
        :columns="columns"
        :data-source="marketingList"
        childrenColumnName = "accountList" // 自定义循环的child
        :defaultExpandAllRows="true"
        :expandedRowKeys="expandedRowKeys"
        @expand="onTableExpand"></a-table>

data中定义
expandedRowKeys:[]

methods: {

            // 获取list
    getMarketStoreList () {
        // 接口获取数据后延迟函数
        setTimeout(() => {
           // 展开指定行
           this.getExpandedRowKeys(this.marketingList)
        })
    },

            // 默认展开行
    getExpandedRowKeys (list) {
      list.forEach((item) => {
        if (item.accountList && item.accountList.length) {
          // 将所有children的父节点取出
          this.expandedRowKeys.push(item.id)
          this.getExpandedRowKeys(item.accountList)
        }
      })
    },
    // 默认行全部展开后，展开收起事件失效，需要手动监听展开收起事件
    onTableExpand (expanded, record) {
      if (expanded) {
        this.expandedRowKeys.push(record.id)
      } else {
        this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.id), 1)
      }
    }
}

有数据时：图1 

 无数据：图2