el-table 获取sortable排序后的列表数据
时间: 2024-05-15 19:12:47 浏览: 12
如果你使用的是 Element UI 中的 el-table,你可以通过监听 sortable-change 事件来获取排序后的列表数据。具体实现方式如下:
1. 在 el-table 组件上添加 sortable 属性,开启排序功能。
```html
<el-table :data="tableData" :sortable="true" @sortable-change="handleSortableChange">
<!-- 表格列定义 -->
</el-table>
```
2. 在 Vue 实例中添加 handleSortableChange 方法,该方法会在排序后触发。
```js
methods: {
handleSortableChange({ newIndex, oldIndex }) {
// 从 tableData 中删除旧位置的数据
const movedData = this.tableData.splice(oldIndex, 1);
// 将数据插入到新位置
this.tableData.splice(newIndex, 0, movedData[0]);
// 打印排序后的列表数据
console.log(this.tableData);
}
}
```
在 handleSortableChange 方法中,我们首先通过 Array.prototype.splice() 方法将旧位置的数据从 tableData 列表中删除,然后再使用该方法将数据插入到新位置。最后,我们打印排序后的列表数据。
注意,el-table 组件会自动更新表格视图,无需手动刷新。
相关推荐
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)