vue 使用 sortable 实现 el-table 拖拽排序功能
干饭第一名 人气:0这篇文章主要介绍了vue 使用 sortable 实现 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>
加载全部内容