Advertisement

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>
    

全部评论 (0)

还没有任何评论哟~