要实现 el-table 的拖拽行排序功能,可以遵循以下步骤,这些步骤涵盖了拖拽功能的实现、更新行的顺序、保存顺序到数据模型、测试功能以及优化拖拽效果。 1. 实现 el-table 的拖拽功能 要实现拖拽功能,我们需要使用 sortablejs 库。首先,确保你已经安装了 sortablejs: bash npm install sortablejs --save 然后,在你...
-- 注意这里的 row-key 需要设置,否则拖动排序可能显示不正常 --> <el-table :data="tableList" row-key="id"> <el-table-column prop="..." label="..."></el-table-column> ... </el-table> </template> mounted() {// 初始化,因为是写死的数据所以在mounted中初始化,实际情况是在tableLis...
1.调取接口获取数据table数据 2.参考接口表格字段mock页面要调整的数据 3.引入mock的字段顺序h和相关第三方表格拖拽 4.el-table渲染相关数据 5.el-table拖拽实现 二、el-table表格动态排序字段 1.根据mock的动态表头实现一个控制字段的表格 2.相关方法 3.表格字段下移方法 总结 前言 背景 公司给了一个需求,需要...
}window.tableSortable=Sortable.create(tbody, { handle:".my-handle", animation: 150, ...params, onEnd ({ newIndex, oldIndex }) { callback(newIndex, oldIndex) } }) }//指定只有定义my-handle的div才能执行拖拽操作 页面中使用需要注意几点 1、表格需要定义一个class,便于指定拖拽哪个表格里的行 2...
ElementUI中的Table组件对于展示数据来说,有着不可替代的作用。但是也有一点点小缺陷,比如行不支持拖拽效果。 当然我们可以借助于第三方库来实现行拖拽效果。 实现方法 实现拖拽效果需要借助于sortablejs库来实现。 GitHub:https://github.com/SortableJS/Sortable ...
最近要实现一个字段展示表格拖动排序的功能,类似于下图: 思路 当时需求澄清会议,一讲这个需求,我脑袋一啪,很快就想到,element-plus table 应该有内置的拖拽功能吧,毕竟也不算啥特殊需求。话不多说,直接上官网一查,是我多想了,这看来是个不常见的需求。那只能自己手搓了。。。
//行拖拽 rowDrop() { const tbody = document.querySelector(".el-table__body-wrapper tbody"); new Sortable(tbody, { animation: 150, // 需要在odEnd方法中处理原始eltable数据,使原始数据与显示数据保持顺序一致 onEnd: ({ newIndex, oldIndex }) => { ...
实现步骤 第一步:创建基础表格 首先,我们需要一个基本的 el-table。这个表格将展示一些可排序的数据。下面是一个简单的表格示例: 第二步:引入 SortableJS 并初始化 接下来,我们需要通过 SortableJS 使 el-table 的行变得可拖拽。这需要在 Vue 组件的 mounted 钩子中完成: import Sortable from 'sortablejs'; ...
因为使用el-table实现,所以一些抓取dom的class类通过el-table内置的类实现,实际如果是简单表格的话,可以自行增加class来实现 底层框架/原理 sortablejs 核心的拖拽原理,我们通过使用sortablejs提供的dom拖拽方案,实现 我们通过让sortablejs的el参数指定到el-table的header上 ...
'.el-table__row', // 拖拽的手柄元素,这里使用表格的行作为手柄 onEnd: (evt) => { this.dragSort(evt);// 拖拽结束时的回调函数 }, }); }, 到此基本已经实现可以拖拽表格的行进行移动排序。当然还是需要结合后端实现排序的记录。可以在这里的dragSort中调用后端接口进行结果保存。