fix(components): [table] hover style error (#16517)

* fixed style hover error  #16515

boundaries situations fixed

* test(components): [table]

hover on which contains nested rowSpan > 1 test cases

---------

Co-authored-by: dwaynewdong <dwaynewdong@tencent.com>

packages/components/table/__tests__/table-test-common.ts

@@ -62,3 +62,80 @@ export function getTestData() {
     },
   ]
 }
+
+export function getMutliRowTestData() {
+  return [
+    {
+      id: '12987122',
+      nodeId: 0,
+      name: 'Tom',
+      release: '234',
+      director: '3.2',
+      runtime: 10,
+      span: [
+        [4, 1],
+        [2, 1],
+      ],
+    },
+    {
+      id: '12987123',
+      nodeId: 0,
+      name: 'Tom',
+      release: '165',
+      director: '4.43',
+      runtime: 12,
+      span: [
+        [0, 0],
+        [0, 0],
+      ],
+    },
+    {
+      id: '12987124',
+      nodeId: 0,
+      name: 'Tom1',
+      release: '324',
+      director: '1.9',
+      runtime: 9,
+      span: [
+        [0, 0],
+        [2, 1],
+      ],
+    },
+    {
+      id: '12987125',
+      nodeId: 0,
+      name: 'Tom1',
+      release: '621',
+      director: '2.2',
+      runtime: 17,
+      span: [
+        [0, 0],
+        [0, 0],
+      ],
+    },
+    {
+      id: '12987126',
+      nodeId: 1,
+      name: 'Tom',
+      release: '539',
+      director: '4.1',
+      runtime: 15,
+      span: [
+        [2, 1],
+        [1, 1],
+      ],
+    },
+    {
+      id: '12987127',
+      nodeId: 1,
+      name: 'Tom',
+      release: '539',
+      director: '4.1',
+      runtime: 15,
+      span: [
+        [0, 0],
+        [1, 1],
+      ],
+    },
+  ]
+}

packages/components/table/__tests__/table.test.ts

@@ -6,7 +6,12 @@ import triggerEvent from '@element-plus/test-utils/trigger-event'
 import { rAF } from '@element-plus/test-utils/tick'
 import ElTable from '../src/table.vue'
 import ElTableColumn from '../src/table-column'
-import { doubleWait, getTestData, mount } from './table-test-common'
+import {
+  doubleWait,
+  getMutliRowTestData,
+  getTestData,
+  mount,
+} from './table-test-common'
 import type { VueWrapper } from '@vue/test-utils'
 import type { ComponentPublicInstance } from 'vue'
 
@@ -1075,6 +1080,64 @@ describe('Table.vue', () => {
     wrapper.unmount()
   })
 
+  it('hover on which contains nested rowSpan > 1', async () => {
+    const wrapper = mount({
+      components: {
+        ElTable,
+        ElTableColumn,
+      },
+      template: `
+        <el-table
+          :data="testData"
+          :span-method="objectSpanMethod"
+          border
+          style="width: 100%; margin-top: 20px"
+        >
+          <el-table-column prop="id" label="ID" width="180" />
+          <el-table-column prop="name" label="片名" />
+          <el-table-column prop="amount1" label="发行日期" />
+          <el-table-column prop="amount2" label="导演" />
+          <el-table-column prop="amount3" label="时长（分）" />
+        </el-table>
+      `,
+      data() {
+        return {
+          testData: getMutliRowTestData(),
+        }
+      },
+      methods: {
+        objectSpanMethod: ({ row, columnIndex }) => {
+          if (row.span[columnIndex]) {
+            return row.span[columnIndex]
+          }
+          return [1, 1]
+        },
+      },
+    })
+    const vm = wrapper.vm
+    await doubleWait()
+    const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr')
+    triggerEvent(rows[3], 'mouseenter', true, false)
+    await doubleWait()
+    await rAF()
+    await doubleWait()
+    const nodeLists = vm.$el.querySelectorAll(
+      '.el-table__body-wrapper tbody tr'
+    )
+    const cellNotContain = nodeLists[0].querySelectorAll('.el-table__cell')[1]
+    expect([...cellNotContain.classList]).not.toContain('hover-cell')
+    const cellShouldContain =
+      nodeLists[2].querySelectorAll('.el-table__cell')[0]
+    expect([...cellShouldContain.classList]).toContain('hover-cell')
+
+    await doubleWait()
+    triggerEvent(rows[3], 'mouseleave', true, false)
+    await rAF()
+    await doubleWait()
+    expect([...cellShouldContain.classList]).not.toContain('hover-cell')
+    wrapper.unmount()
+  })
+
   it('highlight-current-row', async () => {
     const wrapper = mount({
       components: {

packages/components/table/src/table-body/index.ts

@@ -53,6 +53,7 @@ export default defineComponent({
         }, [])
 
         indexes.forEach((rowIndex) => {
+          rowNum = newVal
           while (rowNum > 0) {
             // find from previous
             const preChildNodes = rows[rowNum - 1]?.childNodes