constinitSort=()=>{consttable=document.querySelector(".elTable .el-table__body-wrapper tbody");Sortable.create(table,{group:'shared',animation:150,ghostClass:'sortable-ghost',//拖拽样式easing:'cubic-bezier(1, 0, 0,
通过上述步骤,你可以在Vue 3项目中成功实现使用Element Plus的el-table组件和SortableJS库的表格拖拽排序功能。
function initSortable3(className) { const table = document.querySelector('.' + className + ' .el- table__body-wrapper tbody') new Sortable(table, { animation: 200, // 定义排序动画的时间 onStart: () => { // console.log('开始拖动') }, onEnd: (evt) => { let arr = cloneDeep(s...
这里使用的是vue,所以要下载哦 cnpm install sortablejs --save 代码直接复制粘贴即可运行看效果图了,关于使用请看注释哦 <template> <div class="myWrap"> <el-table :data="tableBody" border row-key="id" :header-cell-style="{ height: '48px', background: '#FAFAFA', color: '#333333', font...
3、编写vue页面(文末有完整页面) 3.1、在需要编写排序的页面引入sortablejs依赖 代码语言:javascript 代码运行次数:0 运行 AI代码解释 importSortablefrom'sortablejs'; 3.2、编写el-table并定义ref=“tableRef” ,ref可以理解为id 代码语言:javascript 代码运行次数:0 ...
vue 使用 sortablejs 拖着el-table行,使行顺序修改,1、安装sortablejsnpmisortablejs--save2、再要使用的引入,或者全局引入也可以,但是我是在使用的地方引入的importSortablefrom'sortablejs'3、直接看代码吧<template><div><el-table:data="tableData"borderi...
遇到的问题是,在对列进行拖动之后,data数据交换成功,但是列名称没有交换;如果使用Table 表格就不会有这种问题; 初始页面如下: 拖动列交换之后如下: 数据列已经交换了,但是表头没有交换; 解决方法如下: 初始化代码如下: <template> <el-table-v2:columns="columns":data="dataList"expand-column-key="column-0...
表格行数据可以进行拖拽,后台数据返回正确,但是页面无法正确展示找到问题了,that.articleList.splice(newIndex, 0, currRow)这句的问题
最近很多需求都与拖拽有关,一般拖拽用的都是vuedraggable但是要是在el-table列表里面拖拽 当用vuedraggable去包裹table列表包外层只能拖动整个列表 包里面数据映射不上,然后就选用了我们今天的主角sortablejs 步骤: 安装: nmp:npm install sortablejs --save ...
在Vue.js框架中,我们通常使用element-ui来构建用户界面。Element UI 中的 el-table 是一个非常常用的组件,它提供了丰富的可配置选项和强大的功能,用于展示和操作表格数据。结合SortableJS 和 el-table 的使用,可以让我们在Vue.js项目中轻松实现表格的拖拽排序功能。接下来,我们将详细介绍如何在Vue.js项目中使用Sort...