响应式网站标准尺寸,网站建设的步骤教程视频,网络推广方案怎么写,网站建设工单系统护语前言#xff1a;
使用vue2element UI#xff0c;且完全使用原生的拖拽事件,无需引入外部库。
如果表格数据量较大#xff0c;或需要更多复杂功能#xff0c;可以考虑使用 vuedraggable库#xff0c;提供更多配置选项和拖拽功能。
思路#xff1a; 1. 通过el-table的ro…前言
使用vue2element UI且完全使用原生的拖拽事件,无需引入外部库。
如果表格数据量较大或需要更多复杂功能可以考虑使用 vuedraggable库提供更多配置选项和拖拽功能。
思路 1. 通过el-table的row-class-name设置行的自定义class类名 2. 在 mounted 和 updated 生命周期钩子中调用this.$nextTick确保 DOM 元素渲染完成后使用 document.querySelectorAll 获取所有 .drag-row 元素。 3. 设置dom的 draggable为true并增加拖拽事件处理函数 ondragstart记录拖拽开始的索引并设置拖拽效果。ondragover在拖拽经过时阻止默认行为允许放置。ondrop在拖拽放下时交换源位置和目标位置的数据并更新列表。 在拖拽事件内 通过 修改数据的index的方式实现 行位置的移动 handleDragStart 方法 记录当前拖拽行的索引 draggingIndex。使用 event.dataTransfer.setData 方法存储拖拽数据方便在 ondrop 中使用。 handleDrop 方法 获取拖拽的源索引 sourceIndex 和目标索引 targetIndex。通过数组的 splice 方法删除源位置的项目并插入到目标位置。更新组件的数据 projects触发 Vue 的响应式更新表格会重新渲染显示新的排序。 效果演示 完整代码
templatediv classsort-containerspan classtitle项目排序/span!-- 通过 row-class-name 为每一行动态添加行的类名 --el-table:dataprojectsrow-class-namedrag-rowrow-contextmenu.preventborderel-table-column propindex label序号 width200template slot-scopescope{{ scope.$index 1 }}/template/el-table-columnel-table-column propname label项目名称/el-table-column/el-table/div
/templatescript
export default {data() {return {projects: [{ id: 1, name: 男子10米气步枪 },{ id: 2, name: 女子50米步枪三姿 },{ id: 3, name: 男子双向飞碟 },{ id: 4, name: 女子25米手枪 },{ id: 5, name: 男子50米步枪卧射 },],draggingIndex: null,// 当前正在拖拽的行索引};},mounted() {// 组件挂载后添加拖拽事件this.addDragEvents();},updated() {// 数据更新后重新添加拖拽事件// 使用 this.$nextTick 获取表格行的 DOM 元素this.$nextTick(() {this.addDragEvents();});},methods: {// 添加拖拽事件addDragEvents() {// 获取所有带有类名 drag-row 的表格行const rows document.querySelectorAll(.drag-row);// 遍历每一行添加拖拽事件rows.forEach((row, index) {row.draggable true; // 设置行元素为可拖拽// 开始拖拽时的事件处理row.ondragstart (event) this.handleDragStart(event, index);// 拖拽经过时的事件处理row.ondragover (event) this.handleDragOver(event);// 拖拽放下时的事件处理row.ondrop (event) this.handleDrop(event, index);});},// 处理拖拽开始事件handleDragStart(event, index) {this.draggingIndex index; // 记录当前拖拽行的索引event.dataTransfer.effectAllowed move; // 设置拖拽效果为移动event.dataTransfer.setData(text/plain, index); // 将索引存储到拖拽数据中},// 处理拖拽经过事件handleDragOver(event) {event.preventDefault(); // 阻止默认事件允许放置event.dataTransfer.dropEffect move; // 设置拖拽效果为移动},// 处理拖拽放下事件handleDrop(event, targetIndex) {const sourceIndex this.draggingIndex; // 获取开始拖拽时记录的索引// 如果源索引和目标索引相同直接返回if (sourceIndex targetIndex) return;// 创建项目列表的副本const projects [...this.projects];// 删除源位置的项目并存储被拖拽的项目const [movedItem] projects.splice(sourceIndex, 1);// 在目标位置插入被拖拽的项目projects.splice(targetIndex, 0, movedItem);// 更新项目列表数据this.projects projects;this.draggingIndex null; // 重置拖拽索引},},
};
/scriptstyle langscss scoped
.sort-container{padding: 15px;.title{font-size: 24px;font-weight: bold;}.el-table{margin-top: 20px;}
}
/* 自定义拖拽行样式 */
.drag-row {cursor: move;user-select: none;
}
.drag-row:hover {background-color: #f0f9ff;
}
/style
