Vue中如何用sortable实现el-table的拖拽排序功能？

本文共计684个文字，预计阅读时间需要3分钟。

原文：本文字介绍Vue使用sortable实现el-table拖拽排序功能，具体内容如下所示：

npm下载：npm install sortablejs --save引入：import Sortable from sortablejs;代码：template div class=table el-table

修改后：使用Vue和sortable.js插件，在el-table中实现拖拽排序功能。具体步骤如下：

1. 安装sortable.js： npm install sortablejs --save

2. 引入Sortable： import Sortable from sortablejs;

3. 在模板中使用el-table并设置拖拽排序： ...

注意：以上代码示例中省略了具体表格列定义和数据绑定部分。

本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能，具体内容如下所示：

npm 下载：

npm install sortablejs --save

引入：

import Sortable from "sortablejs";

代码：

<template> <div class="table"> <el-table ref="dragTable" :data="tableData" border :row-class-name="tableRowClassName"> <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-column label="操作"> <template> <el-button class="move" type="text" size="small">拖 拽</el-button> </template> </el-table-column> </el-table> </div> </template> <script> import Sortable from "sortablejs"; export default { data() { return { tableData: [ { id: "1", name: "text_1", date: "1111-11-11", address: "测试_1", }, { id: "2", name: "text_2_不可拖拽", date: "2222-22-22", address: "测试_2_不可拖拽", disabled: true, }, { id: "3", name: "text_3", date: "3333-33-33", address: "测试_3", }, { id: "4", name: "text_4", date: "4444-44-44", address: "测试_4", }, { id: "5", name: "text_5", date: "5555-55-55", address: "测试_5", }, ], }; }, methods: { // 创建sortable实例 initSortable() { // 获取表格row的父节点 const ele = this.$refs.dragTable.$el.querySelector( ".el-table__body > tbody" ); // 创建拖拽实例 let dragTable = Sortable.create(ele, { animation: 150, //动画 handle: ".move", //指定拖拽目标，点击此目标才可拖拽元素(此例中设置操作按钮拖拽) filter: ".disabled", //指定不可拖动的类名（el-table中可通过row-class-name设置行的class） dragClass: "dragClass", //设置拖拽样式类名 ghostClass: "ghostClass", //设置拖拽停靠样式类名 chosenClass: "chosenClass", //设置选中样式类名 // 开始拖动事件 onStart: () => { console.log("开始拖动"); }, // 结束拖动事件 onEnd: (e) => { console.log( "结束拖动", `拖动前索引${e.oldIndex}---拖动后索引${e.newIndex}` ); }, }); }, // 设置表格row的class tableRowClassName({ row }) { if (row.disabled) { return "disabled"; } return ""; }, }, mounted() { this.initSortable(); }, }; </script> <style lang='scss'> // 拖拽 .dragClass { background: rgba($color: #41c21a, $alpha: 0.5) !important; } // 停靠 .ghostClass { background: rgba($color: #6cacf5, $alpha: 0.5) !important; } // 选择 .chosenClass:hover > td { background: rgba($color: #f56c6c, $alpha: 0.5) !important; } </style>

到此这篇关于vue 使用 sortable 实现 el-table 拖拽排序功能的文章就介绍到这了,更多相关vue实现 el-table 拖拽排序内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！