tableHeader = tempHableHeader; }); }, }); }, // 行拖拽 // 个人认为行拖拽不用加,因为加了以后,就不能双击选行单元格的文字了,当然还是要听产品大佬安排 rowDropInit() { // 第一步,获取行容器 const wrapperRow = document.querySelector( ".el-table__body-wrapper tbody" ); const that = ...
mounted 挂载 初始化sortable 拖拽完onEnd方法返回的index扁平化数组的排序 调用该方法getTable() 后台多返回一个kid,和id的值一样, <el-tablerow-key="kid"/> 如果拖拽的是父节点,父节点和子节点中的kid重新生成,让el-table局部刷新,不然会出现父节点移除,子节点还是在原有的位置,但是tableData中已经是最新的...
Sortable(elTbody, { animation: 150, // 拖拽时的动画速度,单位为毫秒 handle: '.el-table__row', // 拖拽的手柄元素,这里使用表格的行作为手柄 onEnd: (evt) => { this.dragSort(evt);// 拖拽结束时的回调函数 }, }); }, 到此基本已经实现可以拖拽表格的行进行移动排序。
npm方式: $ npm install sortablejs --save 使用 普通el-table代码如下: <template><el-table:data="tableData"borderrow-key="date"style="width:100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-colum...
首先给el-table加上类名:class="elTable" 代码语言:javascript 复制 <el-tableclass="elTable":data="tableData"> 导入sortablejs 代码语言:javascript 复制 //导入sortablejsimportSortablefrom'sortablejs'; 初始化拖拽实例 代码语言:javascript 复制 constinitSort=()=>{consttable=document.querySelector(".elTa...
简介:基于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-...
::v-deep .editTable .el-table__body:hover { cursor: move; } 注意事项: 使用el-table进行行的拖拽的时候,一定需要使用属性row-key,这个需要进行diff; 拖拽之后,表格如果有错位,可以调用el-table自带的方法 doLayout进行更新布局,这个最好是放在this.$nextTick()里面去执行;...
需求:拖拽数据发生变化并且表格发生改动 function initSortable3(className) { const table = document.querySelector('.' + className + ' .el- table__body-wrapper tbody') new Sortable(table, { animation: 200, // 定义排序动画的时间 onStart: () => { // console.log('开始拖动') }, onEnd: ...
在Vue项目中结合Element UI的el-table组件和SortableJS库来实现表格行的拖拽排序,可以按照以下步骤进行: 1. 引入所需的库和组件 首先,确保你的Vue项目中已经安装了Element UI和SortableJS。如果还没有安装,可以使用npm或yarn进行安装: bash npm install element-ui sortablejs --save # 或者 yarn add element-ui...
本文将介绍如何在使用 Element UI 的 Vue 应用中,结合 SortableJS 库,为 el-table 组件添加拖拽排序功能。 在开始之前,确保你的项目中已经安装了 Element UI 和 SortableJS。如果尚未安装,可以通过以下命令进行安装: npm install element-ui sortablejs 实现步骤 第一步:创建基础表格 首先,我们需要一个基本的 el...