下述vue鼠标悬停代码如何优化？

Question

要实现的功能：

鼠标悬停在一个格子上的时候，下面2或3个格子也跟着变颜色，离开则颜色消失。（这里具体是变2个还是变3个，根据具体业务需求变动）

现在我做了一段代码，能实现这个功能，但代码明显太多了（主要指的是定义了一群itemHoverIndexX_X这样的变量），如何优化一下？或者有什么别的精简方案吗？
`

  <tr v-for="(item,index) in show_time">
    <td @mouseenter="enter(index,0)" @mouseleave="leave(index,0)" :class="{active:cssFun(0,index,'itemHoverIndex') == index}" style="width: 100px;height: 17px;">{{item[0]}}</td>
    <td @mouseenter="enter(index,1)" @mouseleave="leave(index,1)" :class="{active:cssFun(1,index,'itemHoverIndex') == index}" style="width: 100px;height: 17px;">{{item[1]}}</td>
    <td @mouseenter="enter(index,2)" @mouseleave="leave(index,2)" :class="{active:cssFun(2,index,'itemHoverIndex') == index}" style="width: 100px;height: 17px;">{{item[2]}}</td>
    <td @mouseenter="enter(index,3)" @mouseleave="leave(index,3)" :class="{active:cssFun(3,index,'itemHoverIndex') == index}" style="width: 100px;height: 17px;">{{item[3]}}</td>
    <td @mouseenter="enter(index,4)" @mouseleave="leave(index,4)" :class="{active:cssFun(4,index,'itemHoverIndex') == index}" style="width: 100px;height: 17px;">{{item[4]}}</td>
    <td @mouseenter="enter(index,5)" @mouseleave="leave(index,5)" :class="{active:cssFun(5,index,'itemHoverIndex') == index}" style="width: 100px;height: 17px;">{{item[5]}}</td>
    <td @mouseenter="enter(index,6)" @mouseleave="leave(index,6)" :class="{active:cssFun(6,index,'itemHoverIndex') == index}" style="width: 100px;height: 17px;">{{item[6]}}</td>
  </tr>

`

  
    data() {
        return {
            //css hover switch

            itemHoverIndex0_0 : null,itemHoverIndex0_1 : null,itemHoverIndex0_2 : null,itemHoverIndex0_3 : null,itemHoverIndex0_4 : null,itemHoverIndex0_5 : null,
            itemHoverIndex0_6 : null,itemHoverIndex0_7 : null,itemHoverIndex0_8 : null,itemHoverIndex0_9 : null,itemHoverIndex0_10 : null,
            itemHoverIndex0_11 : null,itemHoverIndex0_12 : null,itemHoverIndex0_13 : null,itemHoverIndex0_14 : null,itemHoverIndex0_15 : null,
            itemHoverIndex0_16 : null,itemHoverIndex0_17 : null,itemHoverIndex0_18 : null,itemHoverIndex0_19 : null,itemHoverIndex0_20 : null,
            itemHoverIndex0_21 : null,itemHoverIndex0_22 : null,itemHoverIndex0_23 : null,itemHoverIndex0_24 : null,itemHoverIndex0_25 : null,
            itemHoverIndex0_26 : null,itemHoverIndex0_27 : null,itemHoverIndex0_28 : null,itemHoverIndex0_29 : null,itemHoverIndex0_30 : null,
            itemHoverIndex0_31 : null,itemHoverIndex0_32 : null,itemHoverIndex0_33 : null,itemHoverIndex0_34 : null,itemHoverIndex0_35 : null,
            itemHoverIndex0_36 : null,itemHoverIndex0_37 : null,itemHoverIndex0_38 : null,itemHoverIndex0_39 : null,itemHoverIndex0_40 : null,
            itemHoverIndex0_41 : null,itemHoverIndex0_42 : null,itemHoverIndex0_43 : null,itemHoverIndex0_44 : null,itemHoverIndex0_45 : null,
            itemHoverIndex0_46 : null,itemHoverIndex0_47 : null,
            itemHoverIndex1_0 : null,itemHoverIndex1_1 : null,itemHoverIndex1_2 : null,itemHoverIndex1_3 : null,itemHoverIndex1_4 : null,itemHoverIndex1_5 : null,
            itemHoverIndex1_6 : null,itemHoverIndex1_7 : null,itemHoverIndex1_8 : null,itemHoverIndex1_9 : null,itemHoverIndex1_10 : null,
            itemHoverIndex1_11 : null,itemHoverIndex1_12 : null,itemHoverIndex1_13 : null,itemHoverIndex1_14 : null,itemHoverIndex1_15 : null,
            itemHoverIndex1_16 : null,itemHoverIndex1_17 : null,itemHoverIndex1_18 : null,itemHoverIndex1_19 : null,itemHoverIndex1_20 : null,
            itemHoverIndex1_21 : null,itemHoverIndex1_22 : null,itemHoverIndex1_23 : null,itemHoverIndex1_24 : null,itemHoverIndex1_25 : null,
            itemHoverIndex1_26 : null,itemHoverIndex1_27 : null,itemHoverIndex1_28 : null,itemHoverIndex1_29 : null,itemHoverIndex1_30 : null,
            itemHoverIndex1_31 : null,itemHoverIndex1_32 : null,itemHoverIndex1_33 : null,itemHoverIndex1_34 : null,itemHoverIndex1_35 : null,
            itemHoverIndex1_36 : null,itemHoverIndex1_37 : null,itemHoverIndex1_38 : null,itemHoverIndex1_39 : null,itemHoverIndex1_40 : null,
            itemHoverIndex1_41 : null,itemHoverIndex1_42 : null,itemHoverIndex1_43 : null,itemHoverIndex1_44 : null,itemHoverIndex1_45 : null,
            itemHoverIndex1_46 : null,itemHoverIndex1_47 : null,
            itemHoverIndex2_0 : null,itemHoverIndex2_1 : null,itemHoverIndex2_2 : null,itemHoverIndex2_3 : null,itemHoverIndex2_4 : null,itemHoverIndex2_5 : null,
            itemHoverIndex2_6 : null,itemHoverIndex2_7 : null,itemHoverIndex2_8 : null,itemHoverIndex2_9 : null,itemHoverIndex2_10 : null,
            itemHoverIndex2_11 : null,itemHoverIndex2_12 : null,itemHoverIndex2_13 : null,itemHoverIndex2_14 : null,itemHoverIndex2_15 : null,
            itemHoverIndex2_16 : null,itemHoverIndex2_17 : null,itemHoverIndex2_18 : null,itemHoverIndex2_19 : null,itemHoverIndex2_20 : null,
            itemHoverIndex2_21 : null,itemHoverIndex2_22 : null,itemHoverIndex2_23 : null,itemHoverIndex2_24 : null,itemHoverIndex2_25 : null,
            itemHoverIndex2_26 : null,itemHoverIndex2_27 : null,itemHoverIndex2_28 : null,itemHoverIndex2_29 : null,itemHoverIndex2_30 : null,
            itemHoverIndex2_31 : null,itemHoverIndex2_32 : null,itemHoverIndex2_33 : null,itemHoverIndex2_34 : null,itemHoverIndex2_35 : null,
            itemHoverIndex2_36 : null,itemHoverIndex2_37 : null,itemHoverIndex2_38 : null,itemHoverIndex2_39 : null,itemHoverIndex2_40 : null,
            itemHoverIndex2_41 : null,itemHoverIndex2_42 : null,itemHoverIndex2_43 : null,itemHoverIndex2_44 : null,itemHoverIndex2_45 : null,
            itemHoverIndex2_46 : null,itemHoverIndex2_47 : null,
            itemHoverIndex3_0 : null,itemHoverIndex3_1 : null,itemHoverIndex3_2 : null,itemHoverIndex3_3 : null,itemHoverIndex3_4 : null,itemHoverIndex3_5 : null,
            itemHoverIndex3_6 : null,itemHoverIndex3_7 : null,itemHoverIndex3_8 : null,itemHoverIndex3_9 : null,itemHoverIndex3_10 : null,
            itemHoverIndex3_11 : null,itemHoverIndex3_12 : null,itemHoverIndex3_13 : null,itemHoverIndex3_14 : null,itemHoverIndex3_15 : null,
            itemHoverIndex3_16 : null,itemHoverIndex3_17 : null,itemHoverIndex3_18 : null,itemHoverIndex3_19 : null,itemHoverIndex3_20 : null,
            itemHoverIndex3_21 : null,itemHoverIndex3_22 : null,itemHoverIndex3_23 : null,itemHoverIndex3_24 : null,itemHoverIndex3_25 : null,
            itemHoverIndex3_26 : null,itemHoverIndex3_27 : null,itemHoverIndex3_28 : null,itemHoverIndex3_29 : null,itemHoverIndex3_30 : null,
            itemHoverIndex3_31 : null,itemHoverIndex3_32 : null,itemHoverIndex3_33 : null,itemHoverIndex3_34 : null,itemHoverIndex3_35 : null,
            itemHoverIndex3_36 : null,itemHoverIndex3_37 : null,itemHoverIndex3_38 : null,itemHoverIndex3_39 : null,itemHoverIndex3_40 : null,
            itemHoverIndex3_41 : null,itemHoverIndex3_42 : null,itemHoverIndex3_43 : null,itemHoverIndex3_44 : null,itemHoverIndex3_45 : null,
            itemHoverIndex3_46 : null,itemHoverIndex3_47 : null,
            itemHoverIndex4_0 : null,itemHoverIndex4_1 : null,itemHoverIndex4_2 : null,itemHoverIndex4_3 : null,itemHoverIndex4_4 : null,itemHoverIndex4_5 : null,
            itemHoverIndex4_6 : null,itemHoverIndex4_7 : null,itemHoverIndex4_8 : null,itemHoverIndex4_9 : null,itemHoverIndex4_10 : null,
            itemHoverIndex4_11 : null,itemHoverIndex4_12 : null,itemHoverIndex4_13 : null,itemHoverIndex4_14 : null,itemHoverIndex4_15 : null,
            itemHoverIndex4_16 : null,itemHoverIndex4_17 : null,itemHoverIndex4_18 : null,itemHoverIndex4_19 : null,itemHoverIndex4_20 : null,
            itemHoverIndex4_21 : null,itemHoverIndex4_22 : null,itemHoverIndex4_23 : null,itemHoverIndex4_24 : null,itemHoverIndex4_25 : null,
            itemHoverIndex4_26 : null,itemHoverIndex4_27 : null,itemHoverIndex4_28 : null,itemHoverIndex4_29 : null,itemHoverIndex4_30 : null,
            itemHoverIndex4_31 : null,itemHoverIndex4_32 : null,itemHoverIndex4_33 : null,itemHoverIndex4_34 : null,itemHoverIndex4_35 : null,
            itemHoverIndex4_36 : null,itemHoverIndex4_37 : null,itemHoverIndex4_38 : null,itemHoverIndex4_39 : null,itemHoverIndex4_40 : null,
            itemHoverIndex4_41 : null,itemHoverIndex4_42 : null,itemHoverIndex4_43 : null,itemHoverIndex4_44 : null,itemHoverIndex4_45 : null,
            itemHoverIndex4_46 : null,itemHoverIndex4_47 : null,
            itemHoverIndex5_0 : null,itemHoverIndex5_1 : null,itemHoverIndex5_2 : null,itemHoverIndex5_3 : null,itemHoverIndex5_4 : null,itemHoverIndex5_5 : null,
            itemHoverIndex5_6 : null,itemHoverIndex5_7 : null,itemHoverIndex5_8 : null,itemHoverIndex5_9 : null,itemHoverIndex5_10 : null,
            itemHoverIndex5_11 : null,itemHoverIndex5_12 : null,itemHoverIndex5_13 : null,itemHoverIndex5_14 : null,itemHoverIndex5_15 : null,
            itemHoverIndex5_16 : null,itemHoverIndex5_17 : null,itemHoverIndex5_18 : null,itemHoverIndex5_19 : null,itemHoverIndex5_20 : null,
            itemHoverIndex5_21 : null,itemHoverIndex5_22 : null,itemHoverIndex5_23 : null,itemHoverIndex5_24 : null,itemHoverIndex5_25 : null,
            itemHoverIndex5_26 : null,itemHoverIndex5_27 : null,itemHoverIndex5_28 : null,itemHoverIndex5_29 : null,itemHoverIndex5_30 : null,
            itemHoverIndex5_31 : null,itemHoverIndex5_32 : null,itemHoverIndex5_33 : null,itemHoverIndex5_34 : null,itemHoverIndex5_35 : null,
            itemHoverIndex5_36 : null,itemHoverIndex5_37 : null,itemHoverIndex5_38 : null,itemHoverIndex5_39 : null,itemHoverIndex5_40 : null,
            itemHoverIndex5_41 : null,itemHoverIndex5_42 : null,itemHoverIndex5_43 : null,itemHoverIndex5_44 : null,itemHoverIndex5_45 : null,
            itemHoverIndex5_46 : null,itemHoverIndex5_47 : null,
            itemHoverIndex6_0 : null,itemHoverIndex6_1 : null,itemHoverIndex6_2 : null,itemHoverIndex6_3 : null,itemHoverIndex6_4 : null,itemHoverIndex6_5 : null,
            itemHoverIndex6_6 : null,itemHoverIndex6_7 : null,itemHoverIndex6_8 : null,itemHoverIndex6_9 : null,itemHoverIndex6_10 : null,
            itemHoverIndex6_11 : null,itemHoverIndex6_12 : null,itemHoverIndex6_13 : null,itemHoverIndex6_14 : null,itemHoverIndex6_15 : null,
            itemHoverIndex6_16 : null,itemHoverIndex6_17 : null,itemHoverIndex6_18 : null,itemHoverIndex6_19 : null,itemHoverIndex6_20 : null,
            itemHoverIndex6_21 : null,itemHoverIndex6_22 : null,itemHoverIndex6_23 : null,itemHoverIndex6_24 : null,itemHoverIndex6_25 : null,
            itemHoverIndex6_26 : null,itemHoverIndex6_27 : null,itemHoverIndex6_28 : null,itemHoverIndex6_29 : null,itemHoverIndex6_30 : null,
            itemHoverIndex6_31 : null,itemHoverIndex6_32 : null,itemHoverIndex6_33 : null,itemHoverIndex6_34 : null,itemHoverIndex6_35 : null,
            itemHoverIndex6_36 : null,itemHoverIndex6_37 : null,itemHoverIndex6_38 : null,itemHoverIndex6_39 : null,itemHoverIndex6_40 : null,
            itemHoverIndex6_41 : null,itemHoverIndex6_42 : null,itemHoverIndex6_43 : null,itemHoverIndex6_44 : null,itemHoverIndex6_45 : null,
            itemHoverIndex6_46 : null,itemHoverIndex6_47 : null,
     }
},
methods: {
        //css样式处理
        cssFun (n,index, dateString) {
            return this[dateString+n+'_'+index]
        },
        //鼠标进入时
        enter: function(index,n){
            this["itemHoverIndex"+n+'_'+index] = index
            let next = parseInt(index)+1
            this["itemHoverIndex"+n+'_'+next] = next
        },
        //鼠标离开时
        leave: function(index,n){
            this["itemHoverIndex"+n+'_'+index] = null
            let next = parseInt(index)+1
            this["itemHoverIndex"+n+'_'+next] = null
        }
}

`
`

//css样式
.active{
    background-color: #0da9ef;
}

`

Answer 1

<template>
  <div id="app">
    <table>
      <tr v-for="(item, index) in list" :key="index">
        <td
          v-for="(key, kidx) in ['name', 'job', 'age', 'time']"
          :key="kidx"
          :class="{'active': activeKey === key && index >=startIndex && index<endIndex}"
          @mouseenter="demo(index, key)"
        >
          {{item[key]}}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
const activeNum = 3
export default {
  name: "App",
  data() {
    return {
      list: [
        { name: "张三", age: 20, job: "前端", time: "2019-10" },
        { name: "张三", age: 20, job: "前端", time: "2019-10" },
        { name: "张三", age: 20, job: "前端", time: "2019-10" },
        { name: "张三", age: 20, job: "前端", time: "2019-10" },
        { name: "张三", age: 20, job: "前端", time: "2019-10" }
      ],
      startIndex: 0,
      endIndex: activeNum,
      activeKey: ''
    };
  },
  methods: {
    demo(index, key) {
      this.startIndex = index
      this.endIndex = index + activeNum
      this.activeKey = key
    }
  }
};
</script>
<style>
table{
  width: 100%;
}
td {
  background: green;
}

td.active {
  background:black;
  color:#fff;
}

</style>

Answer 2

兄弟 你用的是vue 使用数据控制视图啊。为什么有那么多td... v-for不可以吗
事件监听使用代理模式，在父元素监听即可。

Answer 3

1.通过v-fro进行数据渲染
2.对所有的td设置:data-index="index1,index2"
3.可以通过父级 table 进行事件监听,并在事件监听中传入$evnet触发对象。
4.事件触发中对$event.target.节点进行data-index的读取并存储
5.通过记录的index1,index2进行比较改变td的背景颜色。比如首行td变色 :class="{'active': k === index1 && vk ==== index2}" 第二行的td变色为 :class="{'active': k === (index1 + 1) && vk === index2 }"