How to implement the drag-and-drop function of table columns in Vue Element Sortablejs

This article mainly introduces Vue Element Sortablejs how to achieve table column drag and drop function, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1. Css: dragTable.css

@ charset "UTF-8"; .w-table {height: 100%; width: 100%; float: left;} / * mouse display style * / .w-table_moving. El-table th. Thead-cell {cursor: move! important;}. W-table_moving. El-table__fixed {cursor: not-allowed;}. W-table. Thead-cell {display: inline-flex; flex-direction: column; align-items: center; width: auto Max-height: 23px; vertical-align: middle; overflow: initial; position: relative;}

two。 Package component: dragTable.vue

Import Sortable from 'sortablejs' export default {name: ", data () {return {tableHeader: this.header, dragState: {start:-9, / / index end:-9 of the starting element / / the element index dragging: false covered when you move the mouse, / / whether you are dragging direction: undefined / / drag direction} Props: {data: {default: function () {return []}, type: Array}, header: {default: function () {return []} Type: Array}, option: {default: function () {return {}}, type: Object}}, mounted () {}, watch: {header (val) OldVal) {this.tableHeader = val}}, methods: {renderHeader (createElement, {column}) {return createElement ('div', {' class': ['thead-cell']) On: {mousedown: ($event) = > {this.handleMouseDown ($event, column)}, mousemove: ($event) = > {this.handleMouseMove ($event, column)} [/ / add to display header label createElement ('span', column.label), / / add an empty label to display drag animation createElement (' span') {'class': [' virtual']})}, / / press the mouse to start dragging handleMouseDown (e Column) {this.dragState.dragging = true this.dragState.start = parseInt (column.columnKey) / / add width and height to the virtual container when dragging let table = document.getElementsByClassName ('wmurtable') [0] let virtual = document.getElementsByClassName ('virtual') for (let item of virtual) {item.style.height = table.clientHeight-1 + 'px' / / item.style.width = item.parentElement.parentElement.clientWidth +' px' item.style.width = item.parentElement.clientWidth + 'px'} document.addEventListener (' mouseup' This.handleMouseUp) }, / / Mouse release end drag handleMouseUp () {this.dragColumn (this.dragState) / / initialize the drag state this.dragState = {start:-9, end:-9, dragging: false Direction: undefined} document.removeEventListener ('mouseup', this.handleMouseUp) }, / / drag handleMouseMove (e, column) {if (this.dragState.dragging) {let index = parseInt (column.columnKey) / / record start column if (index-this.dragState.start! = = 0) {this.dragState.direction = index-this.dragState.start

< 0 ? 'left' : 'right' // 判断拖动方向 this.dragState.end = parseInt(column.columnKey) } else { this.dragState.direction = undefined } } else { return false } }, // 拖动易位 dragColumn ({start, end, direction}) { let tempData = [] let left = direction === 'left' let min = left ? end : start - 1 let max = left ? start + 1 : end for (let i = 0; i < this.tableHeader.length; i++) { if (i === end) { tempData.push(this.tableHeader[start]) } else if (i >

Min & & I < max) {tempData.push (this.tableHeader [left? I-1: I + 1])} else {tempData.push (this.tableHeader [I])}} this.tableHeader = tempData}, headerCellClassName ({column ColumnIndex}) {let active = columnIndex-1 = this.dragState.end? `darg_active_$ {this.dragState.direction} `:''let start = columnIndex-1 = this.dragState.start? `darg_ start`:' 'return` ${active} ${start} `}, cellClassName ({column) ColumnIndex}) {return (columnIndex-1 = this.dragState.start? `darg_ start`:')},},} @ import'~ @ / assets/css/dragTable.css'

3. Call the encapsulated component

Check import wTable from'.. /.. / components/dragTable/dragTable' export default {name: 'Table', data () {return {tableOptionSS: {border: true, stripe: true Ref:'WarnResSSTable', class:'pms-table', maxHeight: 100%, height: 100%, sortChange:this.changeTableSortSS} TableHeaderSS: [{label: 'name of prefecture and city', prop: 'dsmc', sortable: true, align:'center', width:'200',} {label: 'operation and maintenance unit', prop: 'ywdw', align:'center', width:'200',}, {label:' substation' Prop: 'bdzmc', align:'center', width:'170',}, {label:' device name', prop: 'sbmc' Sortable: true, align:'center', width:'150',}, {label: 'warning parameters', prop: 'yjcs' Align:'center', width:'150',}, {label: 'warning type', prop: 'yjlx', align:'center' Width:'140',}, {label: 'first warning time', prop: 'scyjsj', sortable:true, align:'center' Width:'160', formatter:this.formatTime}, {label: 'data update time', prop: 'dqyjsj', sortable:true Align:'center', width:'160', formatter:this.formatTime}, {label: 'warning description', prop: 'yjgz' Align:'center', width:'170',}, {label: 'device type', prop: 'sblx', sortable:true Align:'center', width:'140',}, {label: 'voltage level', prop: 'dydjid', sortable:true Align:'center', width:'120', formatter:this.formatVoltageLevel}], WarnResTable_Data_SS: [{dsmc:'dsmc1',sbmc:'sbmc1',dydjid:'hhhhh2'} {dsmc:'dsmc2',sbmc:'sbmc2',dydjid:'hhhhh3'}, {dsmc:'dsmc3',sbmc:'sbmc3',dydjid:'hhhhh4'}],}}, methods: {handleNameSort () {console.log ('handleNameSort')} FormatVoltageLevel: function (row, column) {let val = row [column.property] If (val = = undefined) {return "" } console.log ('val') return '5555'}, changeTableSortSS (column) {console.log (' sortHandle column',column)}, formatTime: function (row, column) {let date = row [column.property] If (date = = undefined) {return ";} return date?moment (new Date (date)) .format ('YYYY-MM-DD HH:MM:SS'):';}, formatVoltageLevel: function (row, column) {let val = row [column.property] If (val = = undefined) {return "" } return val+'kV'},}, components: {wTable}} Thank you for reading this article carefully. I hope the article "how to implement the dragging function of table columns in Vue Element Sortablejs" shared by the editor will be helpful to you. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!