element-ui table行列拖拽排序功能和解决列拖动数据不跟随改变的bug问题

1、引入依赖 sortablejs

npm install sortable.js --save

2、在mounted() 函数中分别引入两个自定义的方法，分别是行和列的拖动

贴一下这两个方法，拖动行方法

dragSort() {let that = this;// 首先获取需要拖拽的dom节点const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0];Sortable.create(el1, {disabled: false, // 是否开启拖拽ghostClass: 'sortable-ghost', //拖拽样式animation: 150, // 拖拽延时，效果更好看group: { // 是否开启跨表拖拽pull: false,put: false},onEnd: (e) => { // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改}});}

拖动列方法

//列拖拽columnDrop() {const wrapperTr = document.querySelector('.el-table__header-wrapper tr')this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,onEnd: evt => {if(evt.oldIndex===evt.newIndex) return;const oldItem = this.columnsConfig[evt.oldIndex];const newItem = this.columnsConfig[evt.newIndex];this.$set(this.columnsConfig,evt.newIndex,oldItem);this.$set(this.columnsConfig,evt.oldIndex,newItem);}})},

2.1、这里值得注意一下就是拖动列这里卡了我很久，原因是因为表头数据是改变了，列表的数据也改变了，但是表头视图不更新，原因是因为：在自定义表头的时候，由于是用的v-for循环生成的，因此会给每个循环体一个固定的key，导致数据频繁异步更新时，因为这个key没有变，所以el-table觉得表头数据是没有变化的，因此就只更新了整体表格数据、key值有变化的列的表头
导致出现了这种情况：正常

有问题的:

原因是我生成列的时候key绑定了固定值

解决：

建议key不要使用Math.random，因为这样会引起每次都会去刷新，从而造成资源的浪费，这里提供一个做法就是：key的值可以使用id，每当移动列的时候，监听回调函数（即下方columnDrop函数），就把两个列的key的值重新生成一个新的，这样就不会造成页面列表的抖动，列数据也进行改变了。
3、OK，问题解决。我的是弄成了组件，实现自定义表头，各位看官可以根据自己的需求弄，现在是贴全部代码：
Html

<template><div class="TableDrag"><el-table:data="tableDatas"border@sort-change="sortMethods":header-cell-style="{color: '#333333', fontSize: '16px', backgroundColor: '#F5F7FA'}"><slot name="fixed"></slot><el-table-columnv-for="(item,index) in columnsConfig":key="index+''+Math.random()":sortable="item.sortAble":label="item.filedZhName":prop="item.filedEnName":width="item.width":column-key="index.toString()":show-overflow-tooltip="true"align="center"><template slot-scope="scope"><spanv-if="item['filedDataType']=='text'||item['filedDataType']=='option'||item['filedDataType']=='mutiloption'">{{scope.row[item.filedEnName]}}</span><el-switchv-else-if="item['filedDataType']=='slots'"v-model="scope.row[item.filedEnName]"active-color="#4B7DF6"inactive-color="#C0C4CC"on-change="viewGoods(scope.row)"></el-switch><el-popover placement="right" trigger="click" v-if="item['filedDataType']=='zuocao'"><div class="items">离职</div><div class="items">调动</div><div class="items">删除</div><div slot="reference" style="cursor: pointer;">...{{scope.row.undefined}}</div></el-popover></template></el-table-column></el-table></div>
</template>

<script>
import Sortable from 'sortablejs';
export default {props:{columnsConfig:{ //表头type:Array,default:()=>{return [];}},tableDatas:{ //数据type:Array,default:()=>{return [];}}},data(){return{}},mounted(){this.dragSort();this.columnDrop();},methods:{//行拖拽dragSort() {let that = this;// 首先获取需要拖拽的dom节点const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0];Sortable.create(el1, {disabled: false, // 是否开启拖拽ghostClass: 'sortable-ghost', //拖拽样式animation: 150, // 拖拽延时，效果更好看group: { // 是否开启跨表拖拽pull: false,put: false},onEnd: (e) => { // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改}});},//列拖拽columnDrop() {const wrapperTr = document.querySelector('.el-table__header-wrapper tr')this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,onEnd: evt => {if(evt.oldIndex===evt.newIndex) return;const oldItem = this.columnsConfig[evt.oldIndex];const newItem = this.columnsConfig[evt.newIndex];this.$set(this.columnsConfig,evt.newIndex,oldItem);this.$set(this.columnsConfig,evt.oldIndex,newItem);}})},// 排序的方法sortMethods(type) {console.log(type);},}
};

data:

 columnsConfig: [{filedEnName: "names",filedDataType: "text",filedZhName: "姓名",closAble: false,sortAble: true},{filedDataType: "text",filedEnName: "telphone",filedZhName: "手机号码",closAble: true,//是否可以关闭sortAble: true,//是否可以排序},{filedEnName: "zhanghao",filedDataType: "text",filedZhName: "账号",closAble: true,sortAble: false},{filedEnName: "status",filedDataType: "slots",filedZhName: "账号状态",closAble: true,sortAble: false},{filedEnName: "email",filedDataType: "text",filedZhName: "工作邮箱",closAble: true,sortAble: true},{filedEnName: "ruzhiriqi",filedDataType: "text",filedZhName: "入职日期",closAble: true,sortAble: false},{filedEnName: "zuocao",filedDataType: "zuocao",filedZhName: "操作",closAble: true,sortAble: false}],tableDatas:[{id:0,names:"范德萨发大水",telphone:"1245488",zhanghao:"法大师傅",status:true,email:"223232",ruzhiriqi:"2020-06-05"},{id:1,names:"范德萨发大水3333",telphone:"1245488",zhanghao:"法大师傅",status:false,email:"223232",ruzhiriqi:"2020-06-05"},{id:2,names:"范德萨发大水111",telphone:"1245488",zhanghao:"法大师傅",status:true,email:"223232",ruzhiriqi:"2020-06-05"}]

style：

.w-table {::v-deep .el-table .darg_start {background-color: #f3f3f3;}.sortable-ghost {opacity: 0.4;background-color: #c1c1c1;}//表头高度::v-deep .el-table th, .el-table tr{background-color: none;height: 56px;}//td字体和颜色大小::v-deep .el-table{td{font-size: 14px;color: #666666;}}}

element-ui table行列拖拽排序功能和解决列拖动数据不跟随改变的bug问题相关推荐

sortable vue 排序_vue 使用 sortable 实现 el-table 拖拽排序功能
本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示: npm 下载: npm install sortablejs --save 引入: import ...
Element UI表格行拖拽功能
效果 <template><div class="hello"><el-tablere ...
Qt可拖拽排序表格（解决滚动条不兼容问题，类似QQ好友分组排序）
原版链接 https://blog.csdn.net/dpsying/article/details/77206127 Qt可拖拽排序表格(类似QQ好友分组排序) 感谢博主无私分享修改后,解决了滚动 ...
ListBox实现拖拽排序功能
1.拖拽需要实现的事件包括: PreviewMouseLeftButtonDown LBoxSort_OnDrop 具体实现如下: private void LBoxSort_OnPreviewMou ...
Element+sorttable实现表格拖拽排序
Sortable.js是一款优秀的js拖拽库官方Demo:http://rubaxa.github.io/Sortable/ sortable.js中文文档https://www.itxst.com ...
微信小程序图片上传、多图拖拽排序功能
基于movable-view实现的拖拽功能可以建一个 dragImg的文件 wxml的代码 <view class="container"><movable-a ...
设置element ui table表格线条颜色以及设置圆角/解决element ui table设置圆角后线条不显示或显示模糊问题，亲测有效
问题描述 table表格设置为圆角后并且设置table border颜色,设置圆角后导致修改颜色后的border无法显示问题解决 /* 设置圆角以及边框颜色 */.el-table{border-r ...
拖拽排序插件Sortable.js在拖动的时候不能滑动鼠标滚轮滚动屏幕的问题
只是一个小问题在使用sortable.js的时候遇到拖动的时候不能滑动鼠标滚轮控制滚动条,找了很多地方,也看了文档,原来是没有找到那个点: forceFallback: false, // igno ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...

element-ui table行列拖拽排序功能和解决列拖动数据不跟随改变的bug问题

element-ui table行列拖拽排序功能和解决列拖动数据不跟随改变的bug问题相关推荐

最新文章

热门文章