本文给大家介绍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>
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue 使用 sortable 实现 el-table 拖拽排序功能”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
20240518
20240518
- 群星《青春重置计划9新的凡人歌》[320KMP3][89.41MB]
- 苏曼《苏曼的夜晚HQII》[低速原抓WAV+CUE]
- 【电影原声】汉斯·季默《星际穿越》2014[FLAC+CUE整轨]
- 诹访内晶子AkikoSuwanai巴赫:小提琴协奏曲《J.S.BachViolinConcertos》(flac)
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 【爵士乐】VA-2024-ParamountJazzLoungeChillingExperience(FLAC)
- 群星《离歌 网剧原声带》[320K/MP3][249.78MB]
- 群星《离歌 网剧原声带》[FLAC/分轨][538.53MB]
- 群星《承欢记 电视剧影视原声带》[320K/MP3][109.99MB]
- 【欧美乡村】JohnnyLee-2024-13thOfJulyandEmotions(FLAC)
- 【流行爵士】PattiAustin-2024-LoveSongs(FLAC)
- 【爵士乐】VA-2024-SupremeLoungeChillSelectionJazzyVibeTunes(FLAC)
- 群星《承欢记 电视剧影视原声带》[FLAC/分轨][219.8MB]
- 群星《乘风2024 第1期》[320K/MP3][110.09MB]