首页 > 其他分享 >Ant-design-vue Table 自定义列斑马纹效果

Ant-design-vue Table 自定义列斑马纹效果

时间:2024-09-27 16:54:40浏览次数:13  
标签:vue 自定义 样式 斑马 Ant table class row

业务需求

在使用 ant-design-vue 的 Table组件的时候,在某个业务模块的内因其承载的功能比较多,各个条件间界定不明显导致感官上十分的模糊,所以需要增加类似斑马纹的填充区分。

table组件自带只支持行的斑马纹而我们需要的是列的斑马纹。table 组件本身是不支持的所以只能通过其他方式来实现。

解决思路

官方提供了一个rowClassName的方法,可以自定义添加 class 来实现对表格不同样式的修改。但是尝试后发现还是只能更改行的样式,并不能改变列的样式。

我们要实现列的斑马纹要对每一行 tr 中 td 来设置不同的 class,而且涉及到有的列会被合并单元格,所以在设置的时候需要考虑的场景还比较多。

因为这个组件中 table 的 Column 是通过自定义的方式来显示的。因为每一列的表头都不一样,所以都是单独设置的。

解决方法

首先 table 的 Head 方面比较容易实现,直接在配置上添加 class 即可。

class: 'custom-column'

{
    title: 'name',
    dataIndex: 'gid',
    align: 'center',
    width: 120,
    class: 'even-row',
}

table 主体添加的方式在研究后其实也是非常的简单,直接通过customCell来根据不同的 index 设置 class 即可。

{
    title: '条件',
    dataIndex: 'index',
    class: 'even-row',
    customCell: (record, rowIndex, columnIndex) => {
      return { class: columnIndex % 2 === 0 ? 'even-row' : 'odd-row' };
    },
}

上面直接在customCell 中 return 返回 一个相同 class 即可,那么在每一行的这一列中的 td 都会加上相同的 class。如果按照上面的写法就是在同一列中不同行可以实现不同的样式。这个还是看个人的需求。

实现效果

通过上面的方法成功的实现了功能需求而且还可以扩展其他的样式。比如自定义列不同的样式实现多元化的展示。最终实现的效果如下。

image

标签:vue,自定义,样式,斑马,Ant,table,class,row
From: https://blog.51cto.com/u_17042992/12130120

相关文章

  • Ant-design-vue Table 自定义列斑马纹效果
    业务需求在使用ant-design-vue的Table组件的时候,在某个业务模块的内因其承载的功能比较多,各个条件间界定不明显导致感官上十分的模糊,所以需要增加类似斑马纹的填充区分。table组件自带只支持行的斑马纹而我们需要的是列的斑马纹。table组件本身是不支持的所以只能通过其他方......
  • Element UI 自定义Layout前端页面布局
    1.layout下新建front文件夹index.vue中内容<template><divclass="frontLayout"><el-container><el-header><divclass="navBar"><divclass="navBarLeft">......
  • JVM自定义类的加载器
    自定义类的加载器咱们书接上回继续说说自定义类类加载器自定义类加载器有什么用?通过类加载器可以实现非常精妙的插件机制。例如:著名的OSGI组件框架,再如Eclipse的插件机制。类加载器为应用程序提供了一种动态增加新功能的机制,这种机制无须重新打包发布应用程序就能实现。......
  • antv x6 注册vue组件 响应传值
    使用antvx6vue组件创建节点信息-当节点过于复杂可以考虑,避免使用markup\attr过于复杂  官网antv-vue组件示例1、使用inject接收父组件传值import{Graph}from'@antv/x6'import{register}from'@antv/x6-vue-shape' importTestNodefrom'./test1.vue'......
  • 基于springboot+vue的公文发文管理系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图核心技术介绍前端框架Vue持久层框架MyBaits为什么选择我代码参考数据库参考测试用例参考源码获取前言......
  • java+vue计算机毕设编程类题目在线评测系统【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和在线教育的普及,编程教育已成为培养未来科技人才的重要基石。然而,传统的编程教学模式往往受限于时间和空间的限制,难以高效、......
  • java+vue计算机毕设病患互助平台【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在当今社会,随着医疗技术的不断进步和人们健康意识的提升,病患群体对于医疗资源的获取与共享需求日益增长。然而,面对复杂的疾病谱系和有限的医疗资源,许......
  • java+vue计算机毕设邦友茶行茶叶销售管理【源码+程序+论文+开题】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着人们生活水平的日益提高,茶文化作为中国传统文化的重要组成部分,正逐渐在现代社会中焕发新的生机与活力。邦友茶行,作为一家致力于传承与创新茶叶文......
  • vue3 vxe-grid 通过数据库返回的列信息,生成columns,并且其中有一列是img类型,进行slots
    1、一般我们写死的列信息的时候,会这样定义:2、然后我们在template里面,这样这样写slots格式化部分:这样表格中就会展示出一张图片,并且,我们点击了可以查看大图。3、那么我们从数据库中返回的列,应该如何去写:letfields={field:item.fieldname,......
  • GuassDB数据库的GRANT & REVOKE
    ​目录一、GaussDB的权限概述二、GaussDB权限设计建议三、GaussDB的GRANT命令1.功能说明2.注意事项3.常用语法四、GaussDB的REVOKE命令用法1.功能说明2.注意事项3.常用语法五、GaussDB示例1.GRANT语句示例2.REVOKE语句示例一、GaussDB的权限概述在数据库中,对象......