<el-table-columnprop="fieldName"label="显示名称"width="200px"class-name="handle":fixed="isFixed ? 'left' : false"><templateslot-scope="scope"><templatev-if="!isDrop"><el-inputv-model="scope.row.fieldName"></el-input></template><templatev-else><span>{{ scope.row.fieldName }}<...
tableHeader = tempHableHeader; }); }, }); }, // 行拖拽 // 个人认为行拖拽不用加,因为加了以后,就不能双击选行单元格的文字了,当然还是要听产品大佬安排 rowDropInit() { // 第一步,获取行容器 const wrapperRow = document.querySelector( ".el-table__body-wrapper tbody" ); const that = ...
Sortable(elTbody, { animation: 150, // 拖拽时的动画速度,单位为毫秒 handle: '.el-table__row', // 拖拽的手柄元素,这里使用表格的行作为手柄 onEnd: (evt) => { this.dragSort(evt);// 拖拽结束时的回调函数 }, }); }, 到此基本已经实现可以拖拽表格的行进行移动排序。
Element UI 中的 el-table 是一个非常常用的组件,它提供了丰富的可配置选项和强大的功能,用于展示和操作表格数据。结合SortableJS 和 el-table 的使用,可以让我们在Vue.js项目中轻松实现表格的拖拽排序功能。接下来,我们将详细介绍如何在Vue.js项目中使用SortableJS 和 el-table 来实现表格的拖拽排序,以及一些注意...
在Vue项目中结合Element UI的el-table组件和SortableJS库来实现表格行的拖拽排序,可以按照以下步骤进行: 1. 引入所需的库和组件 首先,确保你的Vue项目中已经安装了Element UI和SortableJS。如果还没有安装,可以使用npm或yarn进行安装: bash npm install element-ui sortablejs --save # 或者 yarn add element-ui...
问题1:sortableJs 与 fixed同时存在时,el-table中排序失效。 el-table自身有个表格; el-table-column设置了fixed="left",el-table实际上会创建左侧【el-table__fixed】表格; el-table-column设置了fixed="right",会创建右侧【el-table__fixed-right】表格; ...
sortablejs插件在el-table中的运用 概述需求 有一个Table表格,由于数据是根据自增的ID进行排序显示的,有时了调整顺序会在数据库中直接操作数据表,来达到调整数据顺序的目的,因为为了实现在页面实现较为简单的拖拽排序,因此展开讨论。 最后sortablejs插件可以满足需求并可以快捷的实现功能。
然后 这个过程中遇到的一个比较特殊的问题是, 关于 el-table-column 的 fixed 的属性, 对于 sortablejs 这边来定位目标选择列 影响的一个问题 在基础的用例中, 使用 “.el-table__body-wrapper tbody” 去定位目标元素, 然后 带 class 为 draggableClass 的元素作为可以拖拽的元素, 来实现 拖拽的交互 ...
ElementUI中的Table组件对于展示数据来说,有着不可替代的作用。但是也有一点点小缺陷,比如行不支持拖拽效果。 当然我们可以借助于第三方库来实现行拖拽效果。 实现方法 实现拖拽效果需要借助于sortablejs库来实现。 GitHub:https://github.com/SortableJS/Sortable ...
1、安装 sortablejs npm i sortablejs --save 1. 2、再要使用的引入,或者全局引入也可以,但是我是在使用的地方引入的 import Sortable from 'sortablejs' 1. 3、直接看代码吧 <template> <div> <el-table :data="tableData" border id="crTable" row-key="id"> ...