传统的拖动效果,都是基于通过mousedown、mousemove、mouseup事件来修改删减 dom 节点 但Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom 而且Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列...
elementui 拖动 elementui 列表拖拽排序 首先说下项目需求,一个多层嵌套的表格,行可以进行拖拽排序,但不能跨主级去拖拽,下拉可以异步获取数据,考虑了很久,还是用最熟悉的vue+element来做,但是element没有拖拽排序的功能,所以在此基础上加入sortable.js去实现拖拽功能。 后台返回的排序规则是 每个数据都带有3个属性 i...
使用class为 draggable 的div 包裹整个表格,以便拖拽代码中,准确抓取到拖拽元素的父容器 行拖拽要点 需在el-table 标签中,根据行的内容指定行的唯一标识 row-key="id" 列拖拽要点 需额外定义两个数组,分别存储拖拽前的列顺序和拖拽后的列顺序 完整范例代码 <template><el-tablerow-key="id":data="tableData"s...
单行表格可拖动到指定容器并渲染 可拖动用draggable属性,遍历el-table__row,给他们加上draggable,让其可拖动 t.addEventListener("dragover", (e)=>{ //拖动到容器鼠标样式显示‘copy’效果e.preventDefault(); e.dataTransfer.dropEffect= "copy"this.control =true; },true); t.addEventListener("dragleave", (...
const _this = this Sortable.create(tbody, { onEnd({ newIndex, oldIndex }) { const currRow = _this.productList.splice(oldIndex, 1)[0] _this.productList.splice(newIndex, 0, currRow) // 拖动后获取newIdex let arr = Array.from(_this.productList) ...
,methods:{getRowKey(){returnrow.id},//行拖拽rowDrop(){consttbody=document.querySelector('.el-table__body-wrapper tbody')const_this=thisSortable.create(tbody,{onEnd({newIndex,oldIndex}){constcurrRow=_this.tableData.splice(oldIndex,1)[0]_this.tableData.splice(newIndex,0,currRow)}})},/...
Element-UI表格组件实现行拖拽排序 前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 代码语言:javascript 复制 <el-table v-loading="loading":default-sort="{prop: 'sortNum', order: 'ascending'}":data="list"...
目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。 网上大部分方案如下: SortableJS + 原生table SortableJS + 原生table + elementUI样式 使用vueDraggable组件:https://github.com/SortableJS... ...
简介:基于sortablejs实现拖拽element-ui el-table表格行进行排序 可以用原生的dragstart、drag、dragend、dragover、drop、dragleave实现这个效果,但是有现成的轮子就不要重复造了,看效果: <template><el-table :class="$options.name" :data="tableData" ref="table" row-key="ID"><!-- 注意:必须要定义row-...
{ id: "3", name: "沙和尚", age: 1000, home: "通天河", hobby: "游泳", }, { id: "4", name: "唐僧", age: 99999, home: "东土大唐", hobby: "念经", }, ], }; }, mounted() { // 列的拖拽初始化 this.columnDropInit(); // 行的拖拽初始化 this.rowDropInit(); }, ...