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

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

  

页面渲染

      

        

         aaaaaaaaaaaaaaa
          
        
      

 其中通过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
    }
  }

样式

  .itemBg
    background gainsboro
  .checkedItemBg
    background #ecf5ff