Vue3 + Element Plus | el-table 表格获取排序后的数据

在实际开发中，我们经常需要对表格数据进行排序，并在排序后获取最新的数据顺序。本文针对 Vue2（配合 Element-UI）和 Vue3（配合 Element-Plus）两种技术栈，提供获取排序后数据的解决方案，并分析其原理与注意事项。

一、Vue2 + Element-UI 解决方案

在 Vue2 中，Element-UI 的 el-table 组件在客户端完成排序后，会更新其内部状态 tableData。我们可以通过 $refs 访问组件实例，直接获取排序后的数据。

✅ 核心代码

const sortedData = this.$refs.myTable.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() {
      // 关键点：直接访问组件的内部状态 tableData
      const sortedData = this.$refs.myTable.tableData;
      console.log('排序后数据:', sortedData);
    },
    handleSortChange({ column, prop, order }) {
      console.log(`字段 ${prop} 排序方向：${order}`);
    }
  }
};
</script>

---

二、Vue3 + Element-Plus 解决方案

在 Vue3 中，Element-Plus 的 el-table 通过 store 管理内部状态。排序后的数据存储在 store.states._data.value 中，需通过 ref 引用组件实例后访问。

✅ 核心代码

const sortedData = 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 中的内部状态 _data
  const sortedData = store?.states?._data?.value || [];
  console.log('排序后数据:', sortedData);
};

const handleSortChange = ({ column, prop, order }) => {
  console.log(`字段 ${prop} 排序方向：${order}`);
};
</script>

---

三、注意事项

1. 非公开 API 风险
   store.states._data 是 Element-Plus 的内部状态，未来版本可能变更或移除。建议仅在必要时使用，并关注版本更新日志。

2. 服务端排序

   若数据来自服务端（如分页场景），需通过 @sort-change 事件获取排序参数（字段 prop 和方向 order），自行发起请求获取新数据。

3. 数据引用问题

   上述方法获取的是响应式数据的引用，直接修改可能影响表格渲染。如需操作数据，建议深拷贝：

   const safeData = JSON.parse(JSON.stringify(sortedData));

---

四、调试建议

在 getSortedData 方法中，可通过 console.log 输出数据，或使用 Vue Devtools 检查组件内部状态，确保数据一致性。

---

总结

本文提供了 Vue2/3 下获取表格排序数据的实践方案，但需注意内部 API 的稳定性。对于生产环境，更推荐通过 @sort-change 事件自行实现排序逻辑，以保障代码的长期可维护性。