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

常规列表数据用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>

其中通过tableDate遍历的序号动态绑定列表的class属性

:class="[currentIdx==index?'itemBg':'',currentCheckIdx==index?'checkedItemBg':'']"

这个是效果的关键，动态绑定多个class时,按照上述写法，若一个class可将中括号去掉。

触发的方法为

@mouseenter="enter(index)" @mouseleave="leave()" @click="handleCurrentChange(item);currentCheckIdx=index"

方法

  data() {return {currentIdx:null,currentCheckIdx:null,tableDate: []}},methods: {enter(idx){this.currentIdx = idx},leave(){this.currentIdx =null}}

样式

  .itemBgbackground gainsboro.checkedItemBgbackground #ecf5ff

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

PyTorch框架学习七——自定义transforms方法
PyTorch框架学习七--自定义transforms方法一.自定义transforms注意要素二.自定义transforms步骤三.自定义transforms实例:椒盐噪声虽然前面的笔记介绍 ...
Axure-蒙版遮罩，鼠标移入移出点击效果设置，登录注册页面
第二章主要讲解蒙版遮罩,鼠标移入移出点击效果设置及登录注册页面蒙版遮罩就是用和页面大小的并且设置为半透明灰色的矩形盖住原有的页面,与某一元件相关联系(在"交互"中添加" ...
vue中给元素添加鼠标移入，鼠标移出的效果的事件
在vue 中鼠标移入方法为 v-on:mouseover,鼠标移出方法为 v-on:mouseout 使用方法如以下代码中的写法 <div class="subei1" id ...
Vue 表格循环滚动，鼠标移入暂停，移出继续滚动
简单例子: <template> 中的代码: <div id="chart"ref="chart"class="table-body ...
Vue 学习笔记--自定义模板
文章目录 @[TOC](文章目录) 一.自定义模板 1.1.通过template标签定义模板 1.2.将模板注册到Vue的Component中 1.3.在div中使用模板 1.4.完成代码二.自定义 ...
antd vue表单上传文件_AntDesign vue学习笔记-自定义文件上传
上传文件时实际可能需要传输一个token. 方法一: 1.查看vue antdesign文档 https://vue.ant.design/components/upload-cn/ 2.使用cust ...
HTML表格鼠标滑过变色和奇数偶数行变色+点击变色
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
vue element 框架自定义轮播图，点击上下翻图，并让图片居中
1.素材展示窗口,左侧预览滚动区域按分辨率做一屏最大预览数量做均分(超过最大预览数量是滚动条滑动) 2.左侧预览滚动区域增加浅灰色底色要求与滚动条颜色区分 3.预览滚动区域单个区域高度固定,素材图 ...
VUE学习(二十)、插槽
VUE学习(二十).插槽一.默认插槽 1.Category.vue <template><div class="category"><h3>{ ...

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

方法

样式

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

最新文章

热门文章

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

方法

样式

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

最新文章

热门文章

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

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