gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1377
阅读:3736回复:1

Ant Design Vue的table组件设置expandedRowKeys后会导致点击图标展开和折叠行失效

楼主#
更多 发布于:2021-09-10 00:39
应用场景
使用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
游客


返回顶部