西安单位网站建设,手机端微网站设计模板,河北恒基建设招标有限公司网站,社交网站wap模板问题描述
在开发中遇到一个需求#xff0c;即实现table列的拖拽#xff0c;但是调研发现#xff0c;大部分是基于sorttable.js这个包实现的#xff0c;但是通过实际应用#xff0c;发现sorttable.js用在操作element table 组件中并不是很舒服#xff0c;总会莫名其妙的冒…问题描述
在开发中遇到一个需求即实现table列的拖拽但是调研发现大部分是基于sorttable.js这个包实现的但是通过实际应用发现sorttable.js用在操作element table 组件中并不是很舒服总会莫名其妙的冒出一些异常bug于是自行封装一个table 列拖拽组件。
难点概括
①element table header插槽应用
②drag知识点应用
③splice()方法理解
演示代码
templatedivh1基于element-ui table列拖拽实现/h1drag-head :head-columnstableHead :datatableData/drag-head/div
/template
script
import DragHead from ./dragHead.vue;export default {name: DragHeadCase,components: { DragHead },data() {return {tableHead: [{label: 零零,prop: v0,width: 150,},{label: 一一,prop: v1,width: 150,},{label: 二二,prop: v2,width: 150,},{label: 三三,prop: v3,width: 150,},{label: 四四,prop: v4,width: 300,},{label: 五五,prop: v5,},{label: 六六,prop: v6,},{label: 七七,prop: v7,},{label: 八八,prop: v8,},{label: 九九,prop: v9,},],tableData: [{v0: 2016-05-02,v1: 王小虎,v2: 上海,v3: 普陀区,v4: 上海市普陀区金沙江路 1518 弄,v5: 200333,v6: 2016-05-02,v7: 王小虎,v8: 上海,v9: 普陀区,},{v0: 2016-05-02,v1: 王小虎,v2: 上海,v3: 普陀区,v4: 上海市普陀区金沙江路 1518 弄,v5: 200333,v6: 2016-05-02,v7: 王小虎,v8: 上海,v9: 普陀区,},{v0: 2016-05-02,v1: 王小虎,v2: 上海,v3: 普陀区,v4: 上海市普陀区金沙江路 1518 弄,v5: 200333,v6: 2016-05-02,v7: 王小虎,v8: 上海,v9: 普陀区,},{v0: 2016-05-02,v1: 王小虎,v2: 上海,v3: 普陀区,v4: 上海市普陀区金沙江路 1518 弄,v5: 200333,v6: 2016-05-02,v7: 王小虎,v8: 上海,v9: 普陀区,},{v0: 2016-05-02,v1: 王小虎,v2: 上海,v3: 普陀区,v4: 上海市普陀区金沙江路 1518 弄,v5: 200333,v6: 2016-05-02,v7: 王小虎,v8: 上海,v9: 普陀区,},],};},
};
/scripttable 列 拖拽组件实现代码
templatediv stylewidth: 1000pxel-tablerefelTableborderstylewidth: 100%v-bind$attrsv-on$listeners:keyheadKey:cell-class-namecellClassName:header-cell-class-namecellClassName!-- 循环表头 --template v-for(col, index) in tableHeadel-table-column:keyindex:propcol.prop:aligncol.align || center:widthcol.width || 100!-- 通过插槽为表头绑定mousedown和dragover方法 --template slotheader slot-scope{ column, $index }spanmousedownhandleMounseDown($event, column, $index)dragoverhandleDragover($event, column, $index){{ col.label }}/span/template/el-table-column/template/el-table/div
/templatescript
export default {props: {headColumns: Array,},mounted() {/** 备用操作如果需要对headColumns数组操作 */this.tableHead this.headColumns;},data() {return {tableHead: [],// 拖拽状态dragState: {start: -3, // 起始元素的 index 防止初始化cellStyle时序号、展开等默认样式改变最好小于-3end: -3, // 移动鼠标时所覆盖的元素 indexdragging: false, // 是否正在拖动direction: undefined, // 拖动方向},headKey: dragHead, // 表头数组变换位置时重绘table不更新该值表头数组变化时页面不会改变scrollX: 0, // 初始x轴scroll位置用于定位X轴滚动条};},methods: {/** 鼠标摁下触发 */handleMounseDown(e, column, $index) {this.dragState.dragging true;this.dragState.start parseInt($index - 0);// 添加鼠标抬起事件 消除鼠标摁下立刻松开问题document.addEventListener(mouseup, this.handleMouseUp);// 添加拖拽结束事件document.addEventListener(dragend, this.handleMouseUp);// 对选中的表头允许其拖拽const dragclass .el-table__header-wrapper . column.id;const dragDom document.querySelectorAll(dragclass);dragDom.forEach((dom) {// 允许表头块可以被拖拽 draggable 属性 不允许拖拽dragover等相关拖拽事件无法触发dom.setAttribute(draggable, true);});},/** 鼠标在拖拽移动时触发 */handleDragover(e, column, $index) {if (this.dragState.dragging) {// 获取当前滚动条的位置const scrollDom this.$refs.elTable.bodyWrapper;this.scrollX scrollDom.scrollLeft;const index parseInt($index - 0); // 记录起始列/** 实时更改鼠标处于表头的位置 */if (index - this.dragState.start ! 0) {this.dragState.direction index - this.dragState.start 0 ? left : right; // 判断拖动方向this.dragState.end parseInt($index - 0);} else {this.dragState.end this.dragState.start;this.dragState.direction null;}}},/** 鼠标抬起或拖拽结束触发 */handleMouseUp() {// 更新拖拽后的表头this.headDraged(this.dragState);const { end } this.dragState;// 初始化拖动状态this.dragState {start: end, //记录最后拖动的位置end: -9,dragging: false,direction: undefined,};document.removeEventListener(mouseup, this.handleMouseUp);document.removeEventListener(dragend, this.handleMouseUp);setTimeout(() {// 重置拖拽状态this.dragState.start -9;}, 500);},// 更新拖拽后的表头headDraged({ start, end, direction }) {if (direction) {const originColumn this.tableHead[start];// 有位置交换时原先位置的元素删除再在目标处插入this.tableHead.splice(start, 1);this.tableHead.splice(end, 0, originColumn);this.headKey new Date().getTime() ; // 更新table key值this.$nextTick(() {// 因为表头重绘后滚动条会移到最左端初始位置因此如果是在中间部分拖拽还需要把滚动条在定位到该位置this.$refs.elTable.bodyWrapper.scrollLeft this.scrollX;});}},// 拖动虚线样式设置cellClassName({ columnIndex }) {const { start, end, direction } this.dragState;const target columnIndex - 0;if (target start) {// 被移动的元素return drag_start;} else if (target end) {// 要移动的位置return drag_end_${direction};}return ;},},
};
/scriptstyle langscss scoped
::v-deep .el-table {.drag_start {opacity: 0.8;background-color: rgba(0, 0, 0, 0.938);color: #f3e8e8fd;transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);}.drag_end_left {border-left: 2px dotted rgba(0, 0, 0, 0.938);}.drag_end_right {border-right: 2px dotted rgba(0, 0, 0, 0.938);}
}
/style然后我在操作的时候碰到一个报错
[Violation ] Added non-passive event listener to ascroll- blocking mousewheel’event Consider marking event handler as ’ passive’to make the page more responsive. See https: com/feature/574554 3795965952
翻译
[冲突]在ascroll中添加了非被动事件侦听器-阻塞“mousewheel”事件考虑将事件处理程序标记为“passive”以使页面更具响应性。参见https:com/feature/574554 3795965952
解决办法 npm i default-passive-events -S
main.js import default-passive-events 最后
该组件目前仅支持最简单的拖拽效果后续开发出兼容fixed、checkbox、expand 以及操作列的组件会及时更新文章有兴趣的朋友可以点赞收藏。
参考文献
基于element UI 实现 table 列 拖拽_element table列拖拽_淡然自若_blog的博客-CSDN博客
Added non-passive event listener to ascroll- blocking ‘mousewheel‘event Consider marking event handl_绅士的可怖的博客-CSDN博客
