轻松把握 el-table 中指定列的索引，让数据处理更轻松

2024-01-26 22:38:09

在 El-Table 中轻松获取行索引：让数据处理得心应手

在 El-Table 中，灵活运用 El-Table-Column 组件，您可以轻松获取当前行的索引。这将为您的数据处理任务打开新的可能性，从突出显示特定行到根据索引筛选或操作数据。

如何获取行索引？

1. 导入必要组件：

在您的 Vue.js 项目中，导入 El-Table 和 El-Table-Column 组件：

import { ElTable, ElTableColumn } from 'element-ui';

Vue.component('el-table', ElTable);
Vue.component('el-table-column', ElTableColumn);

2. 定义带有索引的列：

在 El-Table 中定义列时，设置 index 属性：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" width="120"></el-table-column>
  <el-table-column prop="age" label="年龄" width="80"></el-table-column>
  <el-table-column prop="address" label="地址" width="180"></el-table-column>
  <el-table-column index label="索引" width="80"></el-table-column>
</el-table>

3. 在 JavaScript 中获取索引：

通过访问 $index 属性获取当前行的索引：

const table = document.querySelector('el-table');

table.addEventListener('click', (event) => {
  const target = event.target;

  if (target.tagName === 'TD') {
    const row = target.parentNode;
    const index = row.$index;

    console.log(`您点击了第 ${index} 行。`);
  }
});