vue+Ant design实现嵌套table(expandedRowKeys,expandIcon)

vue+Ant design实现嵌套table(expandedRowKeys,expandIcon)

<a-table 
  :columns="columns" 
  :data-source="dataSource" 
  :pagination="false" 
  :expandIcon='expandFirstIcon'
  :expandedRowKeys.sync="firstExpandedRowKeys"
> 
	<!-- 第二层 table 数据 -->
    <template slot="expandedRowRender" slot-scope="value, data, index">
    	<a-table
          :columns="columns"
          :data-source="innerData"
          :pagination="false"
          :expandIcon='expandSecondIcon'
          :expandedRowKeys.sync="secondExpandedRowKeys"
        > 
        </a-table>
     </template>
</a-table>

secondExpandedRowKeys属性是选择要打开的行
值为一个下标的数组 [ 0 ]
expandSecondIcon是一个方法 用来实现 展开和关闭时的 图标

data(){
  return{
    columns,
    dataSource:[],//
    innerData:[],//内嵌table 数据
    firstExpandedRowKeys:[],//内嵌 打开的 行
  }
 },
methods:{
	//内嵌 第一层 图标判断
   expandFirstIcon(props){
     console.log(props);
     //如果有子数据 则显示 展开图标
     if(props.record.childList&&props.record.childList.length>0){
       return (
         <a-icon type="plus" onClick={(e) => {this.openFirstRow(props)}} />
       )
     } else {
        return;
      }
   },
   //打开事件
   openFirstRow(props){
   	  //props.expanded为true则为关闭
      if (props.expanded) {
        this.firstExpandedRowKeys = [];
        this.innerData = [];
      } else {
       //遍历数据列表
        this.dataSource.map((item,index)=>{
        	//将当前点击的 行 下标复制给firstExpandedRowKeys 来锁定展开的行
            if(item.id===props.record.id){
              this.firstExpandedRowKeys = [index];
              this.innerData = props.record.childList;
            }
        })
      }
   },
},

以此类推可以 继续 嵌套

我项目中一共三层,效果图