Vue3 + Element-plus 获取 el-table 排序后的数据

一、Vue2 + Element-UI 解决方案

✅ 核心代码：this.$refs.tableRef.tableData

<template> <div> <el-table ref="myTable" :data="tableData" @sort-change="handleSortChange" style="width: 100%" > <el-table-column prop="name" label="姓名" sortable></el-table-column> <el-table-column prop="age" label="年龄" sortable></el-table-column> </el-table> <el-button @click="getSortedData">获取排序后数据</el-button> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 25 }, { name: '李四', age: 30 }, { name: '王五', age: 28 } ] }; }, methods: { getSortedData() { // 关键代码：通过 $refs 访问内部 tableData const sortedData = this.$refs.myTable.tableData; console.log('排序后数据:', sortedData); }, handleSortChange({ column, prop, order }) { console.log(`字段 ${prop} 排序方向：${order}`); } } }; </script>

二、Vue3 + Element-Plus 解决方案

✅ 核心代码：tableRef.value.store.states._data.value

<template> <div> <el-table ref="myTableRef" :data="tableData" @sort-change="handleSortChange" style="width: 100%" > <el-table-column prop="name" label="姓名" sortable /> <el-table-column prop="age" label="年龄" sortable /> </el-table> <el-button @click="getSortedData">获取排序后数据</el-button> </div> </template> <script setup> import { ref } from 'vue'; const myTableRef = ref(null); const tableData = ref([ { name: '张三', age: 25 }, { name: '李四', age: 30 }, { name: '王五', age: 28 } ]); const getSortedData = () => { if (!myTableRef.value) return; const store = myTableRef.value.store; // 关键代码：通过 store 状态获取当前数据 const sortedData = store?.states?._data?.value || []; console.log('排序后数据:', sortedData); }; const handleSortChange = ({ column, prop, order }) => { console.log(`字段 ${prop} 排序方向：${order}`); }; </script>