首页el-table 拖拽行

el-table 拖拽行

时间: 2025-01-14 07:14:53 浏览: 53

### 实现 `el-table` 的拖拽行功能为了使 `Element UI` 中的 `el-table` 组件支持行的拖拽排序，可以借助第三方库 `element-ui-el-table-draggable` 来扩展原生组件的功能[^1]。安装依赖： ```bash npm install element-ui-el-table-draggable --save ``` 引入并注册插件，在项目的入口文件中添加如下代码： ```javascript import Vue from 'vue'; import ElTableDraggable from 'element-ui-el-table-draggable'; Vue.use(ElTableDraggable); ``` 创建一个简单的表格模板，并通过属性绑定来启用拖拽特性： ```html <template> <div id="app">  <el-table :data="tableData" style="width: 100%" row-key="id" @sort-change="handleSortChange"> <el-table-column prop="date" label="日期"></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" } ] }; }, methods: { handleSortChange(event) { console.log("Sorting changed:", event); } } }; </script> ``` 注意上述例子中的 `row-key` 参数用于指定唯一标识列名，这对于保持数据的一致性和稳定性非常重要。当用户改变顺序时会触发 `@sort-change` 事件回调函数。为了让这个功能更加完善，还可以考虑监听具体的拖拽完成后的操作，比如更新服务器端的数据排列等逻辑处理。

阅读全文