fix(components): [table] fix table display error in stripe mode (#22022)

* fix(components): [table] Fix table display error in stripe mode

* fix(components): [table] Add test case

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

@@ -200,6 +200,56 @@ describe('Table.vue', () => {
       wrapper.unmount()
     })
 
+    it('should display stripe correctly when row is expanded and closed', async () => {
+      const tableData = [
+        {
+          id: '1',
+          children: [
+            {
+              id: '1-1',
+            },
+          ],
+        },
+        {
+          id: '2',
+        },
+      ]
+      const wrapper = mount({
+        components: {
+          ElTable,
+          ElTableColumn,
+        },
+        template: `
+          <el-table
+            :data="tableData"
+            row-key="id"
+            stripe
+            default-expand-all
+          >
+            <el-table-column prop="id" label="id" sortable />
+          </el-table>
+        `,
+        data() {
+          return {
+            tableData,
+          }
+        },
+      })
+      await doubleWait()
+      const expandTrigger = wrapper.find('.el-table__expand-icon')
+      const rows = wrapper.findAll('.el-table__row')
+      expect(rows.length).toBe(3)
+      expect(rows[0].classes()).not.toContain('el-table__row--striped')
+      expect(rows[1].classes()).toContain('el-table__row--striped')
+      expect(rows[2].classes()).not.toContain('el-table__row--striped')
+      expandTrigger.trigger('click')
+      await doubleWait()
+      expect(rows[0].classes()).not.toContain('el-table__row--striped')
+      expect(rows[1].classes()).not.toContain('el-table__row--striped')
+      expect(rows[2].classes()).toContain('el-table__row--striped')
+      wrapper.unmount()
+    })
+
     it('border', async () => {
       const wrapper = createTable('border')
       await doubleWait()

packages/components/table/src/table-body/render-helper.ts

@@ -42,6 +42,9 @@ function useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {
     getSpan,
     getColspanRealWidth,
   } = useStyles(props)
+
+  let displayIndex = -1
+
   const firstDefaultColumnIndex = computed(() => {
     return props.store?.states.columns.value.findIndex(
       ({ type }) => type === 'default'
@@ -62,12 +65,19 @@ function useRender<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {
   ) => {
     const { tooltipEffect, tooltipOptions, store } = props
     const { indent, columns } = store!.states
-    const rowClasses = getRowClass(row, $index)
+    const rowClasses = []
     let display = true
     if (treeRowData) {
       rowClasses.push(ns.em('row', `level-${treeRowData.level}`))
       display = !!treeRowData.display
     }
+    if ($index === 0) {
+      displayIndex = -1
+    }
+    if (props.stripe && display) {
+      displayIndex++
+    }
+    rowClasses.push(...getRowClass(row, $index, displayIndex))
     const displayStyle = display ? null : { display: 'none' }
     return h(
       'tr',

packages/components/table/src/table-body/styles-helper.ts

@@ -27,7 +27,7 @@ function useStyles<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {
     return rowStyle || null
   }
 
-  const getRowClass = (row: T, rowIndex: number) => {
+  const getRowClass = (row: T, rowIndex: number, displayIndex: number) => {
     const classes = [ns.e('row')]
     if (
       parent?.props.highlightCurrentRow &&
@@ -35,8 +35,7 @@ function useStyles<T extends DefaultRow>(props: Partial<TableBodyProps<T>>) {
     ) {
       classes.push('current-row')
     }
-
-    if (props.stripe && rowIndex % 2 === 1) {
+    if (props.stripe && displayIndex % 2 === 1) {
       classes.push(ns.em('row', 'striped'))
     }
     const rowClassName = parent?.props.rowClassName