element-ui table行点击获取行索引（index）并利用索引更换行顺序

主要介绍了element-ui table行点击获取行索引（index）并利用索引更换行顺序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 在Element-UI框架中，`el-table` 是一个强大的组件，用于展示表格数据。当我们需要在用户点击表格行时获取其对应的行索引，并利用这个索引来改变行的顺序，可以按照以下步骤进行操作。 我们需要在表格的每一行数据中添加一个属性 `index`，用于存储该行的索引值。Element-UI 提供了一个名为 `tableRowClassName` 的方法，我们可以利用它来实现这一功能。在HTML模板中，我们将 `tableRowClassName` 属性绑定到该方法： ```html <el-table :row-class-name="tableRowClassName"> <!-- 表格列定义 --> </el-table> ``` 然后，在Vue组件的 `methods` 对象中定义 `tableRowClassName` 方法： ```javascript methods: { tableRowClassName({ row, rowIndex }) { // 将rowIndex赋值给row对象的index属性 row.index = rowIndex; // 返回一个CSS类名，这里可以不返回，因为我们主要是为了给行添加index属性 return ''; } } ``` 当用户点击表格行时，我们可以通过监听 `@row-click` 事件来获取当前被点击的行。在 `el-table-column` 中，我们可以通过 `slot` 来自定义列的内容，同时在其中处理点击事件： ```html <el-table-column label="操作" width="120" @row-click="handleRowClick" > <template slot-scope="scope"> <!-- 操作按钮等 --> </template> </el-table-column> ``` 接着，定义 `handleRowClick` 方法来处理点击事件： ```javascript methods: { handleRowClick(row, column, event) { // 当前点击行的索引 const clickedRowIndex = row.index; // 在这里你可以根据需要改变行的顺序 // 假设我们有一个数组保存了所有行的数据 const tableData = this.tableData; // 将被点击行移到数组的末尾 const tempRow = tableData.splice(clickedRowIndex, 1)[0]; tableData.push(tempRow); // 重新设置表格数据 this.tableData = tableData; } } ``` 以上代码展示了如何在用户点击表格行时获取行索引，并利用这个索引改变行的顺序。在实际应用中，你可能需要根据业务需求调整行的移动逻辑，例如根据用户的拖动手势或其他条件来改变行顺序。 总结一下，Element-UI的`el-table`组件通过`tableRowClassName`方法和`row-click`事件提供了获取行索引的能力，结合Vue的响应式特性，我们可以方便地实现基于行索引的行顺序调整。在实际项目中，这样的功能可以用于实现排序、筛选等多种交互操作，极大地提升了用户体验。