fix(components): [table] The index parameter of the selectable function is undefined (#19587)

* fix(components): [table] first record can not be checked

* fix(components): [table] last commit doesnt work for others index

Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>

* test(components): [table] add test cases

* test(components): [table] modify the test case of the last submission

---------

Co-authored-by: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Co-authored-by: btea <2356281422@qq.com>

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

@@ -260,9 +260,8 @@ describe('table column', () => {
       }
 
       describe('= selection', () => {
-        const wrapper = createTable('selection')
-
         it('render', async () => {
+          const wrapper = createTable('selection')
           await doubleWait()
           expect(wrapper.findAll('.el-checkbox').length).toEqual(
             getTestData().length + 1
@@ -270,6 +269,8 @@ describe('table column', () => {
         })
 
         it('select all', async () => {
+          const wrapper = createTable('selection')
+          await doubleWait()
           wrapper.find('.el-checkbox').trigger('click')
           await doubleWait()
           expect(wrapper.vm.selected.length).toEqual(5)
@@ -277,15 +278,65 @@ describe('table column', () => {
         })
 
         it('select one', async () => {
-          const wrapper2 = createTable('selection')
+          const wrapper = createTable('selection')
 
           await doubleWait()
-          wrapper2.findAll('.el-checkbox')[1].trigger('click')
+          wrapper.findAll('.el-checkbox')[1].trigger('click')
 
           await doubleWait()
-          expect(wrapper2.vm.selected.length).toEqual(1)
-          expect(wrapper2.vm.selected[0].name).toEqual(getTestData()[0].name)
-          wrapper2.unmount()
+          expect(wrapper.vm.selected.length).toEqual(1)
+          expect(wrapper.vm.selected[0].name).toEqual(getTestData()[0].name)
+          wrapper.unmount()
+        })
+
+        // #19581
+        it('The index parameters of the selectable function should be the same as the index of the row', async () => {
+          const expectIndexs = []
+          const actualIndexs = []
+          const wrapper = mount({
+            components: {
+              ElTable,
+              ElTableColumn,
+            },
+            template: `
+          <el-table :data="testData" @selection-change="change">
+            <el-table-column type="selection" :selectable="selectableFn" />
+            <el-table-column prop="desc" />
+          </el-table>`,
+
+            data() {
+              return {
+                selected: [],
+                testData: [
+                  { id: 0, desc: 'record 1' },
+                  { id: 1, desc: 'record 2' },
+                  { id: 2, desc: 'record 3' },
+                ],
+              }
+            },
+            methods: {
+              change(rows) {
+                this.selected = rows
+              },
+              selectableFn(row, index) {
+                const expectIndex = this.testData.findIndex(
+                  (item) => item.id === row.id
+                )
+                expectIndexs.push(expectIndex)
+                actualIndexs.push(index)
+                return true
+              },
+            },
+          })
+          await doubleWait()
+
+          wrapper.findAll('.el-table__row .el-checkbox').forEach((checkbox) => {
+            checkbox.trigger('click')
+          })
+          await doubleWait()
+
+          expect(expectIndexs).toEqual(actualIndexs)
+          expect(wrapper.vm.selected.length).toBe(wrapper.vm.testData.length)
         })
       })
 

packages/components/table/src/store/watcher.ts

@@ -245,7 +245,8 @@ function useWatcher<T>() {
       row,
       selected,
       treeProps,
-      ignoreSelectable ? undefined : selectable.value
+      ignoreSelectable ? undefined : selectable.value,
+      data.value.indexOf(row)
     )
     if (changed) {
       const newSelection = (selection.value || []).slice()

packages/components/table/src/util.ts

@@ -278,7 +278,7 @@ export function toggleRowStatus<T>(
   let changed = false
   const index = statusArr.indexOf(row)
   const included = index !== -1
-  const isRowSelectable = selectable?.call(null, row, rowIndex)
+  const isRowSelectable = selectable?.call(null, row, _rowIndex)
 
   const toggleStatus = (type: 'add' | 'remove') => {
     if (type === 'add') {