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

最新推荐文章于 2025-06-23 17:58:24 发布

原创最新推荐文章于 2025-06-23 17:58:24 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

Ant design

5 篇文章

订阅专栏

本文详细介绍了如何使用Vue和Antdesign组件库创建一个支持多级展开的表格，包括设置`expandedRowKeys`和自定义展开图标的方法。通过`expandedRowRender`属性实现二级表格的展示，并提供了`expandFirstIcon`和`expandSecondIcon`方法来控制展开和关闭的图标。同时，展示了如何处理数据和响应式地更新内嵌表格的数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
            }
        })
      }
   },
},