本文主要是介绍Ant Design Vue的table组件设置expandedRowKeys后会导致点击图标展开和折叠行失效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
应用场景
使用Ant Design Vue框架开发前端，要求树状table表格默认全部展开。使用expandedRowKeys实现了该目标，但是发现table表格的图标失效了。点击图标无法折叠或展开行
解决办法
使用table组件的 @expand 事件，实现onExpand方法。onExpand即可解决点击图标失效的问题
<template><a-table :columns="currColumns" :dataSource="dataSource" rowKey="id" bordered :pagination="false" :expandedRowKeys="expandedRowKeys" @expand="onExpand"><template slot="dataType" slot-scope="text, record">{{text}}<div v-show="visible"><a v-if="text.indexOf(`List`) > -1 || text.indexOf(`Array`) > -1"><a-button type="primary" shape="circle" size="small" @click="addToMock(record)"><a-icon type="plus"></a-icon></a-button><a-button type="primary" shape="circle" size="small" @click="reduceToMock(record)"><a-icon type="minus"></a-icon></a-button></a></div></template></a-table>
</template>
onExpand (expanded, record) {console.log('extend:' + expanded)console.log('record: ' + JSON.stringify(record))if (expanded) {// 设置展开窗Key，代表展开操作this.expandedRowKeys.push(record.id)} else {// 代表折叠操作if (this.expandedRowKeys.length) {this.expandedRowKeys = this.expandedRowKeys.filter(v => {return v !== record.id})}}},
这篇关于Ant Design Vue的table组件设置expandedRowKeys后会导致点击图标展开和折叠行失效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
