首页 > 其他分享 >Ant Design Vue使用a-table动态设置columns

Ant Design Vue使用a-table动态设置columns

时间:2024-12-16 11:44:15浏览次数:7  
标签:Vue 使用 表头 Ant Design customRender table 数据 columns

一、需求

一个页面显示多个列表数据,需要改变表头columns参数等

二、问题

1、设置columns之后,因为a-table中的columns、data-source是响应式的,所以可以看到切换渲染是可以正常完成的,数据、表头都是正常的。

2、由于列表数据除了直接取过来显示的之外,还有部分数据需要根据值进行判断显示对应的状态,在动态改变columns值后发现在a-table标签内所定义的slot不起作用了。

3、由于切换时渲染的表头文字等显示是正常的,所以排除渲染问题;在data中改变columns的初始赋值,发现可能跟初始赋值有关。

三、解决办法

1、在a-table中除了在标签内自定义slot来改变数据的内容显示外,还可以使用customRender改变相关值得显示。

2、如果使用customRender进行格式列表数据,最好在methods中新写一个方法进行对应的columns赋值,或者直接在切换中定义(主要是为了保证customRender使用到的数据、方法已经进行定义)

ps:如果存在点击事件,或者需要使用标签;需要使用jsx语法,例如

标签:Vue,使用,表头,Ant,Design,customRender,table,数据,columns
From: https://www.cnblogs.com/shlbetter/p/18609638

相关文章

  • 《Vue进阶教程》第十二课:实现一对多
      往期内容:《Vue进阶教程》第二课:为什么提出组合式API《Vue进阶教程》第三课:Vue响应式原理《Vue进阶教程》第四课:reactive()函数详解《Vue进阶教程》第五课:ref()函数详解(重点)《Vue进阶教程》第六课:computed()函数详解(上)《Vue进阶教程》第七课:computed()函数详解(下......
  • vue3开发中常见的代码错误或者其他相关问题小文章5.0
    41. 事件修饰符在组合式API中的使用错误示例:在组合式API中不正确地使用事件修饰符(如.prevent或.stop),导致事件处理逻辑失效。解决方案:确保在setup函数中正确使用事件修饰符。可以通过v-on的选项对象来添加修饰符。//在<scriptsetup>中import{ref}from'......
  • vue2 脚手架安装及使用
    1.安装npminstall-g@vue/cli2.查看版本 vue-V3.使用3.1命令形式vuecreatemy-project   3.2可视化操作       ......
  • vue3项目构建流程
    1.项目包管理工具选择pnpmnpmi-gpnpm2.选择用vite管理项目注意node的版本需要16+,项目才能正常使用,在cmd中输入pnpmcreatevite命令,按照指示创建初始项目3.下载eslint项目代码校验执行pnpmieslint-D安装eslint依赖,然后执行命令npxeslint--init生成配置文件.eslint.cj......
  • 基于SpringBoot + Vue的校园自助洗衣服务管理系统的设计与实现
    文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言......
  • 基于SpringBoot + Vue的校园二手物品交易系统的设计与实现(角色:买家用户、卖家用户、管
    文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言......
  • SpringBoot+Vue供应商管理系统源码+论文
    SpringBoot+Vue供应商管理系统源码+论文代码可以查看文章末尾⬇️联系方式获取,记得注明来意哦~......
  • 基于SpringBoot+vue的商城停车场管理系统(2024-2025年最新,原创项目)
    文章目录系统演示录像系统实际运行效果图技术框架SpringBoot-后端开发框架Vue-前端开发框架前后端分离的开发流程可行性分析系统测试系统测试的目的系统功能测试数据库表设计(供参考)1.用户表(t_user)2.角色表(t_role)3.权限表(t_permission)4.用户-角色关联表(t_user_r......
  • 基于SpringBoot + Vue的超市外卖系统的设计与实现(精选计算机毕业设计-源码+文档+部署)
    文章目录系统演示录像系统实际运行效果图技术框架SpringBoot-后端开发框架Vue-前端开发框架前后端分离的开发流程可行性分析系统测试系统测试的目的系统功能测试数据库表设计(供参考)1.用户表(t_user)2.角色表(t_role)3.权限表(t_permission)4.用户-角色关联表(t_user_r......
  • 【Microi 吾码】基于 Microi 吾码低代码框架构建 Vue 高效应用之道
    我的个人主页文章专栏:Microi吾码引言在当今快速发展的软件开发领域,低代码开发平台正逐渐崭露头角,为开发者们提供了更高效的应用构建途径。Microi吾码低代码框架结合Vue的强大前端能力,更是为打造高效应用提供了绝佳的组合。在这里,我将深入探讨如何基于Microi吾码低......