博客

效果图：



一、首先我们要在表格(Table)上添加绑定每行的点击事件@on-row-click

<Table @on-row-click="onExpand" border :columns="columns" :data="list"></Table>

二、在表格(Table)的表头columns中添加一列

{
    type:'expand',
    width:30,
    render:(h,params)=>{
        return h('Table',{
            props: {
                columns: [{ title:"排行榜",align: 'center',key: "component"},{title:"积分",align: 'center',key:"version_name"}],//表头
                data: [],//内部表格展示的数据
            },
        })//我这里使用的是表格，大家也可以根据自己的实际情况更换别的组件
    }
}

三、最后就是点击事件的方法

onExpand(row,index){
    this.list.forEach((item,i)=>{ //这个循环是为了每次只能展开一个，其他自动收起，不需要可以去掉
        i !== index ? this.list[i]._expanded = false : '';
    })
    this.list[index]._expanded = !this.list[index]._expanded;
    this.list.sort()
},