iView中表格(Table)添加点击行展开扩展说明的功能

效果图

先在data()的columns部分增加一列

...
                {
                    type:'expand',
                    width:30,
                    render:(h,params)=>{
                        return h('div',params.row.detail) //这里的detail是我请求来的数据，如果你的业务更复杂，可以把div换成你的组件，传值进去即可
                    }
                }
...

然后在<Table>中，绑定每行点击事件@on-row-click

<Table @on-row-click="onExpand"></Table>

最后就是onExpand方法了

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