阅读:4975回复:1
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"> pw_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 }) } } }, https://blog.csdn.net/sinat_34241861/article/details/107798756?utm_medium=distribute.wap_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-1.withoutpaiwithsearchfrombaidu_wap&depth_1-utm_source=distribute.wap_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-1.withoutpaiwithsearchfrombaidu_wap |
|
沙发#
发布于:2021-09-10 00:39
|
|