el-table针对全数据排序

### 如何使用 `el-table` 组件实现全数据排序 为了使 `el-table` 支持全数据排序功能，可以采用两种主要方法之一：一种是利用 Element UI 自带的排序属性；另一种则是通过集成 Sortable.js 来增强原生支持之外的能力。 #### 方法一：基于Element UI内置特性 如果只需要简单的列内升序降序排列，则可以直接应用官方文档推荐的方式设置表头中的 `sortable` 属性为 true 或者自定义排序逻辑： ```html <template> <div id="app"> <!-- 定义表格 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" sortable></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-03", name: "Tom", address: "No. 189, Grove St, Los Angeles" }, { date: "2016-05-02", name: "John", address: "New York No. 1 Lake Park" } ] }; } }; </script> ``` 这种方法适用于基本场景下的单字段或多字段组合排序需求[^1]。 #### 方法二：结合Sortabel.js扩展交互体验 当项目中有更复杂的业务诉求比如跨页码拖拽调整顺序时，就需要引入外部库如 Sortable.js 辅助完成操作。具体做法如下所示： 首先安装依赖包并导入到项目里： ```bash npm install sortablejs --save ``` 接着修改模板结构以便于后续处理事件： ```html <template> <div id="app"> <!-- 添加特定样式类名用于区分可移动区域 --> <el-table ref="dragTable" v-loading="loading" element-loading-text="Loading..." :data="list" border fit highlight-current-row @sort-change="handleSortChange" class="draggable-table"> ... </el-table> </div> </template> ``` 最后编写 JavaScript 部分初始化实例对象以及监听变化后的回调函数： ```javascript import Sortable from 'sortablejs'; // ...其他代码... mounted() { this.setDragging(); } methods: { setDragging() { const el = document.querySelector('.draggable-table tbody'); this.sortable = Sortable.create(el, { ghostClass: 'sortable-ghost', // Class name for the drop placeholder, setData: function(dataTransfer) {}, // Avoid warning about setting empty text/html. onEnd: evt => { let targetRow = this.list.splice(evt.oldIndex, 1)[0]; this.list.splice(evt.newIndex, 0, targetRow); // 更新服务器端的数据源 (此处省略实际请求部分) } }); }, handleSortChange(column) { console.log(`Sorting by ${column.prop} in direction of ${column.order}`); // 对整个列表重新按照指定条件进行排序 if (!column || !column.order) return; this.loading = true; setTimeout(() => { try { switch (column.order.toLowerCase()) { case 'ascending': this.list.sort((a,b)=> a[column.prop].localeCompare(b[column.prop])); break; case 'descending': this.list.sort((a,b)=> b[column.prop].localeCompare(a[column.prop])); break; } this.$nextTick(() => { this.loading = false; }) } catch(error){ console.error('Error occurred while sorting:', error); this.loading = false; } }, 500); // 模拟异步加载过程 } } ``` 上述方案不仅实现了可视化的即时反馈效果，同时也兼顾到了后台同步更新的要求[^2]。