VUE学习（七） 自定义列表鼠标移入变色，点击变色（仿el-table实现）

最新推荐文章于 2024-07-03 21:10:53 发布
最新推荐文章于 2024-07-03 21:10:53 发布
阅读量4.7k 收藏 7
点赞数 4
分类专栏： vue 文章标签： vue手写列表 仿table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/n009ww/article/details/102966852
版权
本文介绍了如何使用Vue手写列表来模仿el-table的效果，特别是在实现列表鼠标移入变色和点击变色功能上。通过动态绑定class属性`currentIdx==index?'itemBg':'',currentCheckIdx==index?'checkedItemBg':''`，并结合`mouseenter`, `mouseleave`和`click`事件来控制样式变化。" 128492509,15559016,华为云OBS：企业数据上云的高效解决方案,"['华为云', '对象存储服务', '数据迁移', '云存储', '企业运维']
摘要由CSDN通过智能技术生成

常规列表数据用elementUI的el-table标签即可实现，但有些需要自定义列表数据样式的，则需要手写，这样如何做出和el-table一样的效果呢？一下代码可以实现

  

页面渲染

      <div class="list" v-if="tableDate.length" v-infinite-scroll="load">
        <div  :class="[currentIdx==index?'itemBg':'',currentCheckIdx==index?'checkedItemBg':'']" class="accident-item flex-row" v-for="(item, index) in tableDate" :key="item.eventId"  @mouseenter="enter(index)" @mouseleave="leave()" @click="currentCheckIdx=index">
         aaaaaaaaaaaaaaa
          </div>
        </div>
      </div>

 其中通过ta

最低0.47元/天 解锁文章
两个娃他爹
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue3 - Arco Design Vue 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（改变鼠标移入时的背景色）
王佳斌
06-30 2376
vue3，arco design vue，arco design，表格，a-table，hover，表格hover的class类名是什么，class，hover，在arco design vue项目中，表格组件如何去掉鼠标移入时的hover效果，vue3 arco.design 表格组件修改鼠标移入行的背景颜色，table表格，取消表格行row移入高亮效果，去掉鼠标移入行时的hover效果，取消a-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消arco表
Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（完美解决表格合并后导致行错位）
王佳斌
02-19 5271
vue3，element plus，el-table，table表格，取消表格行row移入高亮效果，element plus表格组件去掉鼠标移入行时的hover效果，取消el-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消elementplus表格的行悬停效果，怎么将表格移入每行时的灰色高亮去掉，table的行hover如何去除，element的el-table合并，处理合并产生的hover样式问题，表格合并后鼠标移入hover出现异常问题，表格行被鼠标
[Vue]鼠标悬停变色
m0_51439562的博客
10-11 2854
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
Vue 鼠标滑入元素改变其背景颜色，且鼠标划入另一块区域,背景颜色保持不变
qq_39691676的博客
06-25 451
如上图所示：鼠标划入"条件区域",对应ul元素改变背景颜色，且划入内容区域时，背景颜色保持不变。只有当鼠标划出"内容区域"，或者切换到"条件区域"的其他ul元素上时，背景颜色才恢复。
ElementUI中的el-table解决宽度问题 - 根据内容自动撑开
最新发布
觉醒法师的专栏
07-03 5684
在使用element-ui中，会发现表格组件el-table在未指定宽度情况下，会自动计算并给表格宽度赋值。但实际开发中，有时需要根据内容实际长度自动撑开显示，由内容的多少而决定表格的宽度，而不是默认宽度为100%。在默认情况下表格宽度为100%显示，并且列项未指定宽度情况下，剩余部分会平均分配宽度，本案例实际需求是由内容自动撑开显示。componentUpdated
Vue中 鼠标移入div和移出div 改变样式
weixin_45419441的博客
08-13 4356
<div style="border-radius:10px" @mouseover="mouseOver" :style="active" @mouseleave="mouseLeave"> </div> data(){ return{ active:"" } } methods(){ mouseOver(){ //改变样式 this.active = 'background-color: rg.
vue li点击变色
szh1127249432的博客
02-23 635
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &..
dataframe 如何选中某列的一行_如何实现表格中鼠标划过一行整行变色，点击一行选中一行？...
weixin_39628063的博客
11-29 277
（记得先引入js文件哦）1.首先我们需要一个简单的表格。下面是我的表格。注：有些表格默认没有边框，所以需要自己手动设置。（下面是我手动添加的样式表，放在style标签内）2.这里是关键的部分，实现鼠标点击某一行后，将该行标为高亮。注：这里的select是一个自己写的一个样式。tr:hover{}是为鼠标划过的某一行增加一个效果。(!impartant是提高该样式的优先级，否则hover的颜色就会盖...
element ui el-table 动态改变 单元格 的颜色.txt
11-11
element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件（page_table）里面，可以重复使用。
Vue ＜el-table＞标签实现表头换色及多个表头换色
qq_50369182的博客
04-22 3609
修改el表头的颜色
vue实现动态列表 点击 各行换色
xm1037782843的博客
06-10 9651
只是模拟一练习 v-for v-on v-bind的一个简单demo代码思路：遍历出data里面的数据 v-for给li加点击事件绑定class样式 怎么控制样式的显示通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false代码：&lt;div id="app"&gt; &lt;ul&gt; ...
iview表格（table）组件划过时选中的颜色修改
Kino的博客
07-27 618
.ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-body tr.ivu-table-row-highlight:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-highlight:nth-child(2n) td, tr.ivu-table-row-highlight.ivu-table-row-hover td{ backgro.
iview的Table关于改变选中项的背景颜色
qq_42027064的博客
08-14 4882
iview修改选中项的背景颜色 最近自己遇到了用iview修改选中项背景颜色的问题，在网上找了很久也没找到，自己已解决，于是和大家分享一下自己写的。本人也是第一次写，不足之处希望大家多多包涵。 我直接给大家直接看我的代码，我的方法还是存在缺陷如果大家有更好的可以分享： ...
iView--color色彩
的博客
02-22 1646
1、hover事件： 指一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了...
饿了么table鼠标移入改变背景颜色
weixin_43239880的博客
11-20 821
饿了么鼠标移入单元格变色 背景颜色实现效果： 代码： ::v-deep .el-table .el-table__body tr td:hover{ background-color: #d4b021 !important; } 边框实现效果： 代码： ::v-deep .el-table .el-table__body tr td { border: 2px solid transparent !important; } ::v-deep .el-table .el-table__body
button hover逐渐变色_前端项目001 Vue 造轮子之Button
weixin_39946355的博客
11-22 435
頔言頔语：进步，一定要进步，进步是跟收入持平的本钱。总有人问:前端开发中是哪些轮子值得实现一遍。但是你造过那些轮子呢？这是我造过的！声明：本项目所有的UI，来自于方应航，我只做简单修改！输入框 · 轱辘 · 语雀​www.yuque.com所有的项目按照流程按照一下目录进行需求分析UI设计项目知识点项目难点（在3中解决，用饮用块的方式标识）1. 需求分析1. 1 Button功能分析该轮子只具有点...
vue列表渲染，以及鼠标点击改变样式的问题
qq_20777797的博客
10-19 9610
在实际项目中，我们进场会遇到鼠标点击该表某个DOM元素来添加样式，在原生的js或者jquery中，我们会比较熟练的实现这个需求，但是在vue中怎么实现呢？ 我最初的想法是直接操作dom，即在鼠标点击该表某个DOM元素之后，取到event.target，然后给它添加class，但是遇到一个问题就是想一开始进入页面就给列表中的第一个元素添加上样式，但是在created和mounted方法中取do
iview table 中根据不同状态改变其文本的颜色
qq_35457469的博客
11-15 1291
结果展示： 代码： { title: '审核状态', key: 'Review', align: 'center', render: (h,params) => { if(params.row.Review === '已审核'){ return h('span',{ 'style': { 'color': '#2DC8...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值