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

本文主要是介绍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后会导致点击图标展开和折叠行失效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/534938

相关文章

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法:临时设置(Windows用`set`,Linux/macOS用`export`)、永久设置(系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量(适用于当前会话)永久设置环境变量(Windows系统

MySQL CTE (Common Table Expressions)示例全解析

《MySQLCTE(CommonTableExpressions)示例全解析》MySQL8.0引入CTE,支持递归查询,可创建临时命名结果集,提升复杂查询的可读性与维护性,适用于层次结构数据处... 目录基本语法CTE 主要特点非递归 CTE简单 CTE 示例多 CTE 示例递归 CTE基本递归 CTE 结

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发(goroutine)、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置(VS Code)一些基本

小白也能轻松上手! 路由器设置优化指南

《小白也能轻松上手!路由器设置优化指南》在日常生活中,我们常常会遇到WiFi网速慢的问题,这主要受到三个方面的影响,首要原因是WiFi产品的配置优化不合理,其次是硬件性能的不足,以及宽带线路本身的质... 在数字化时代,网络已成为生活必需品,追剧、游戏、办公、学习都离不开稳定高速的网络。但很多人面对新路由器

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步:OData实例创建1.1 OData.newInstance() 详细分析1.1.1

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)