antd-table:通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累

news2024/11/25 23:35:21

斑马条纹

对于element-ui是有个stripe斑马条纹的属性的,最终呈现的效果如下:
在这里插入图片描述
antd-table中是没有这个属性的,但是可以通过rowClassName:可以给对应行添加指定类名。

在这里插入图片描述
实现方法:

<a-table
  :rowClassName="getRowClassName"
  size="small"
  :dataSource="tableData"
  :rowKey="(row) => row.id"
  bordered
  :scroll="{ y: 430 }"
  :pagination="false"
  :columns="columns"
></a-table>
getRowClassName(row,index){
	if (index % 2 == 0) {
        return 'evenCls';
      }
}
/deep/.ant-table-body > table > .ant-table-tbody > tr.evenCls > td {
  background: #fff9e6;
}
/deep/.ant-table-body > table > .ant-table-tbody > tr:hover > td {
  background: #fff;
}

最终效果图:
在这里插入图片描述

单选——最简单的方式

<a-table
  style="margin-top: 10px"
  :dataSource="tableData"
  :rowKey="(row) => row.id"
  :scroll="{ x: 1000, y: 500 }"
  bordered
  :pagination="pagination"
  @change="changeTable"
  :columns="columns"
  :row-selection="{
    selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange,
  }"
></a-table>
onSelectChange(selectedRowKeys) {
 this.selectedRowKeys = selectedRowKeys;
},

完成!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1319521.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【ESXi】ESXi 版本回退

目录 8. ESXi 版本回退8.1 版本回退条件与注意事项8.2 版本回退步骤8.3 示例演示&#xff08;1&#xff09;准备工作&#xff08;2&#xff09;进入DCUI界面&#xff08;3&#xff09;按 F11 重启系统引导&#xff08;4&#xff09;进入引导选项&#xff08;5&#xff09;进入 …

【玩转Node.JS】=> 之 Buffer(缓冲器)

Node.js 是一个开源、跨平台的 JavaScript 运行时环境 文章目录 Buffer 概念Buffer 的特点创建 BufferBuffer 与字符串的转化 Buffer 的读写 Buffer 概念 Buffer 是一个类似于数组的 对象 &#xff0c;用于表示固定长度的字节序列Buffer 本质是一段内存空间&#xff0c;专门用…

android工程目录结构

App工程分为两个层次&#xff0c;一个层次是项目&#xff0c;另一个层次是模块 模块依附于项目&#xff0c;每个项目至少有一个模块&#xff0c;也能拥有多个模块 一般所言的“编译运行App”&#xff0c;指的是运行某个模块&#xff0c;而非运行某个项目&#xff0c;因为模块才…

【docker】修改docker的数据目录

背景 主节点是分配了较少内存和存储的低配机器&#xff0c;因为我们系统的rancher是用docker镜像启动的&#xff0c;而rancher和docker的默认目录都放在/var/lib下面&#xff0c;而这个/var目录目前只分配10G的存储&#xff0c;导致节点存储报警。因此想修改docker的数据目录&…

关于pycharm无法进入base界面的问题

问题&#xff1a;terminal输入activate无法进入base 解决方案 1.Cortana这边找到Anaconda Prompt右击进入文件所在位置 2. 右击进入属性 3. 复制cmd.exe开始到最后的路径 cmd.exe "/K" C:\ProgramData\anaconda3\Scripts\activate.bat C:\ProgramData\anaconda3 …

工业数据的特殊性和安全防护体系探索思考

随着工业互联网的发展&#xff0c;工业企业在生产运营管理过程中会产生各式各样数据&#xff0c;主要有研发设计数据、用户数据、生产运营数据、物流供应链数据等等&#xff0c;这样就形成了工业大数据&#xff0c;这些数据需要依赖企业的网络环境和应用系统进行内外部流通才能…

STM32——时钟树与滴答计时器

STM32——时钟树与滴答计时器 使用的开发板为stm32F407VET6的芯片,主要介绍stm32的时钟树与滴答计时器的一些理论和一个自己编写的delay函数。 时钟树的结构图可以在STM32F4xx中文参考手册.pdf中的时钟这块找到。而滴答计时器是内核资源&#xff0c;需要到Cortex M3与M4权威指南…

Vue中的数据变化监控与响应——深入理解Watchers

目录 ​编辑 前言 1. 基本用法&#xff1a; 2. 深度监听&#xff1a; 3. 立即执行&#xff1a; 4. 监听多个数据&#xff1a; 5. 清理监听器&#xff1a; 6. 监听路由变化&#xff1a; 总结&#xff1a; 我的其他博客 前言 在Vue.js中&#xff0c;watch是一种用于监听…

【MATLAB】数据拟合第11期-基于粒子群迭代的拟合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 基于粒子群迭代的拟合算法是一种优化技术&#xff0c;它基于粒子群优化算法&#xff08;PSO&#xff09;的基本思想。该算法通过群体中个体之间的协作和信息共享来寻找最优解。 在基于粒…

vue3 插槽slot

插槽是子组件中的提供给父组件使用的一个占位符&#xff0c;用 <slot> 表示&#xff0c;父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&#xff0c;填充的内容会替换子组件的<slot> 元素。<slot> 元素是一个插槽出口 (slot outlet)&…

自由编程学习资源:free-programming-books

最近&#xff0c;我发现了一个在GitHub上备受欢迎的项目&#xff0c;它为程序员和编程爱好者提供了丰富、免费且高质量的学习资料&#xff0c;这就是"free-programming-books"。目前&#xff0c;这个项目在GitHub上已经有305k的star&#xff0c;显示出它在开发者社区…

分享66个JavaGame源码总有一个是你想要的

分享66个JavaGame源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 游戏下载链接&#xff1a;https://pan.baidu.com/s/1BUVmun2RhAY4vAMJwcY0mQ?pwd6666 提取码&#xff1a;6666 游戏项目名称 java实现…

千兆多模光模块SFP-GE-SX是什么?特点和应用领域有哪些?

千兆多模光模块SFP-GE-SX是一种用于光纤通信的光模块&#xff0c;用于传输千兆&#xff08;1 Gbps&#xff09;速率的数据。它使用多模光纤作为传输介质&#xff0c;并通过光信号来实现数据的传输。多模光纤是一种光纤&#xff0c;它具有相对较大的纤芯直径&#xff0c;通常为5…

UltraISO(软碟通)制作U盘启动盘完整教程

一、 准备工作 UltralSO 软件、ISO系统镜像、容量合适的U盘 二、详细步骤 首先&#xff0c;确保你已经安装了UltraISO软件&#xff0c;如果没有&#xff0c;可以从官方网站下载并安装。插入你的U盘&#xff0c;并确保U盘上没有重要的数据&#xff0c;先格式化优盘。然后打开…

ASF-YOLO:一种基于注意尺度序列融合的细胞实例分割YOLO模型

摘要 我们提出了一种基于注意力尺度序列融合的You Only Look Once&#xff08;YOLO&#xff09;框架&#xff08;ASF-YOLO&#xff09;&#xff0c;该框架结合了空间和尺度特征&#xff0c;用于准确快速的细胞实例分割。在YOLO分割框架的基础上&#xff0c;我们采用尺度序列特…

电子电器架构( E/E) 演化 —— 大算力

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

Proxifier安装与激活

proxifier官网链接 步骤 1&#xff1a;购买 Proxifier 许可证 访问 Proxifier 官方网站&#xff1a;https://www.proxifier.com/ 在网站上查找并选择 “Purchase” 或类似的选项。 选择适合你需求的许可证类型&#xff0c;填写相关信息并完成购买。 如果不想购买&#xff0c…

每天五分钟计算机视觉:网络中的网络(NiN)

本文重点 前面的课程中我们学习了众多的经典网络模型&#xff0c;比如LeNet、AlexNet、VGG等等&#xff0c;这些网络模型都有共同的特点。 它们的特点是&#xff1a;先由卷积层构成的模块充分提取空间特征&#xff0c;然后再由全连接层构成的模块来输出分类结果。也就是说它们…

【C语言】基础刷题训练4(含全面分析和代码改进示例)

系列文章目录 提示&#xff1a;该系列文章暂未全部完成&#xff0c;暂时欠缺系列文章目录&#xff0c;见谅 基础刷题训练4&#xff08;含全面分析和代码改进示例&#xff09; 文章目录 系列文章目录前言题目链接(有需要的请自行链接做题)T1&#xff1a;思路1&#xff1a;思路2&…

基于Java SSM框架实现课程思政元素收集系统项目【项目源码+论文说明】

基于java的SSM框架实现课程思政元素收集系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认…