深扒Element UI的el-table，轻松实现行索引传递给方法！

2022-12-28 16:48:39

在 Element UI 中获取并传递表格行索引：深入探索

在 Element UI 中，强大的 el-table 组件提供了丰富的功能，允许您自定义表格的行为。其中，获取行索引并将其传递给方法是一个常见需求，本文将深入探讨如何实现这一操作。

1. 巧妙利用 row-index 属性

Element UI 提供了 row-index 属性，用于获取当前行的索引值。

<el-table :data="tableData" row-key="id">
  <el-table-column
    prop="name"
    label="姓名"
  >
    <template slot-scope="scope">
      {{ scope.row.name }} - {{ scope.rowIndex }}
    </template>
  </el-table-column>
</el-table>

row-index 属性添加到 el-table-column 组件上，为每一行添加一个索引值，可以通过 scope.rowIndex 访问。

2. 通过 slot-scope 访问行索引

接下来，利用 slot-scope 访问行索引并将其传递给方法。

<el-table :data="tableData" row-key="id">
  <el-table-column
    prop="name"
    label="姓名"
  >
    <template slot-scope="scope">
      {{ scope.row.name }} - <a @click="handleRowClick(scope.rowIndex)">{{ scope.rowIndex }}</a>
    </template>
  </el-table-column>
</el-table>

这里添加了名为 handleRowClick 的方法，它接受行索引作为参数。当用户点击行索引时，该方法会被调用。

methods: {
  handleRowClick(rowIndex) {
    console.log(`行索引：${rowIndex}`);
  },
},

3. 自定义表格大展身手

现在，您已掌握在 Element UI 的 el-table 中获取行索引并将其传递给方法的方法。是时候大展身手，自定义您的表格了！

常见问题解答

Q：如何仅获取选中的行索引？
A：使用 selection-change 事件获取选中的行索引数组，例如：

selectionChange(val) {
  const selectedRows = val.map(item => item.rowIndex);
},

Q：如何通过索引选中特定行？
A：使用 toggleRowSelection 方法，例如：

toggleRowSelection(index, selected) {
  this.$refs.table.toggleRowSelection(index, selected);
},

Q：如何获取所有行索引？
A：使用 data 和 row-key 属性，例如：

const rowIndexes = this.tableData.map(item => item[rowKey]);

Q：如何禁用行索引？
A：将 row-index 属性设置为 false。

Q：如何在不同组件中访问行索引？
A：使用 ref 将表格组件传递给父组件，例如：

<template>
  <el-table ref="table" :data="tableData">...</el-table>
</template>
<script>
export default {
  methods: {
    getRowIndex() {
      return this.$refs.table.store.states.index;
    }
  }
}
</script>