vue ant 做一个公共table组件，其中要实现点击行时被点击行背景色要改变，且该方法可以使用组件时覆盖使用！

已于 2023-07-05 16:36:46 修改
阅读量183 收藏
点赞数
文章标签： vue.js 前端 javascript 前端框架
于 2023-07-05 16:35:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56995244/article/details/131558854
版权

遇到个问题，在rowClassName和customClick被定义在props里时，想要拿到data内的属性是不行的，要报错。

 props里定义的rowClassName

 发现直接在props里是取不到data里的值的，那就只能换个方式

将 props里的默认值都为null，table里面改下，未传rowClassName和customClick时使用默认的。

 方法内定义

 使用效果

ok，可以了！ 

DX_release
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3+ant-design-vue实现table单元行单击改变背景颜色
wsdnnnnnnnnn的博客
05-17 1396
vue3+ant-design-vue实现table单元行单击改变背景颜色
实现让ant design vua中table组件的的某一行背景色变成红色
qq_57229245的博客
07-12 178
2.然后在highlightRow进行逻辑处理，给需要背景时变化的数据添加类名3.给类名加样式。
ant desing vue table 点击表格，实现背景行变色
czx3387170的博客
12-14 2173
直接利用rowClassName这个参数，直接上代码 <a-table :rowClassName="(record,index)=>{ retrun index===selectIndex?'active':' '}" :customRow="rowClick" ></table> data(){ return{ selectIndex=null } }, method:{ rowClick(record,index){ return{ props:
vue 给ant design table 组件自定义点击行（选中行）样式和斑马纹样式
热门推荐
yorcentroll的博客
04-26 1万+
写在开头： element-ui的table组件有几个属性很好用，但是ant-design中table组件是没有的。 比如： stripe：是否为斑马纹 table。 highlight-current-row：是否要高亮当前行。 当然，还有好几个其他的属性，但是本文先只讲这两个。既然element-ui有，ant-design没有，那我在用ant-design的table组件时，...
ant-design-vue table组件修改 选中行背景颜色
weixin_43208652的博客
09-11 3773
<a-table :rowKey=" (row, index) => { return index; } " :pagination="false" :columns="columns" :data-source="data..
ant-design-vue中table数据在鼠标hover时去掉当前行显示的背景色
Yukinoshita_kino的博客
02-21 5491
ant-design、element-ui等UI框架中，table列表的数据，在鼠标悬停(hover)时，去掉当前行所默认显示的背景颜色.
antd组件的Table，点击某一行，让这行整体变色
qq_52845451的博客
03-03 3384
antd组件的Table，点击某一行，让这行整体变色
关于修改ant-design-vue的table组件背景色遇到闪动的问题
qq_36877078的博客
05-09 397
这样重置之后，hover的样式确实没了，但是会出现以下闪动的情况，闪动出来一个背景色，找不到到底是哪个元素上的背景色。多方查找后才发现，只重置了hover时的td的背景色还不行，需要单独在重置一下td的背景色，如下。修改完之后发现表格行还有个hover的背景色，于是再次重置样式如下。ant-design-vue表格行背景色闪动的问题。项目中需要修改表格的背景色为以下样式。此时就不会有闪动的问题了。
antd-vue中，点击table行高亮效果实现，自定义hover行 时的背景颜色
string佳佳的博客
03-03 3357
原博地址
vue用ant design中table表格,点击某行时触发的事件操作
01-18
// 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识：Ant-Design-Vue table 合并单元格，并且添加点击事件 点击行，有一个customRow。可以配置点击...
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
10-15
主要介绍了Vue中Table组件行内右键菜单实现方法，该项目是基于 vue + AntDesign的，具体实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
vue 点击按钮增加一行的方法
10-18
在Vue.js中，实现点击按钮增加一行的功能是常见的动态数据绑定和事件处理的应用场景。Vue.js是一个轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化的能力，使得开发者能够更方便地构建可复用、可维护...
使用Vue组件实现一个简单弹窗效果
08-27
使用Vue组件实现一个简单弹窗效果 本文主要介绍了使用Vue组件实现一个简单弹窗效果，涉及到弹窗遮罩的实现、slot插槽的使用方式、props和$emit传参等内容。 弹窗遮罩的实现 弹窗遮罩是实现弹窗效果的关键部分。...
vue中预览视频，word，pdf，xlsx
最新发布
小小小猿
07-22 145
如果vue版本是vue2.6版本或者以下版本还需要安装@vue/composition-api。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 232
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 419
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 731
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
vue this.$refs 动态拼接
cimbala的博客
07-19 160
业务需要，refs是不固定的。
antd vue 的table组件rowSelection会多处一列选择框 选择框的表头怎么改背景色
05-20
如果你要改变选择框表头的背景色，可以通过以下步骤来实现： 1. 首先，在 `columns` 中添加一列需要选择的列，如下所示： ```javascript const columns = [ { title: 'Name', dataIndex: 'name', }, { title...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值