您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue Element Sortablejs如何實現(xiàn)表格列的拖拽功能,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
1. css: dragTable.css
@charset "UTF-8"; .w-table{ height: 100%; width: 100%; float: left; } /* 拖動過程中,鼠標顯示樣式 */ .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; }
2. 封裝組件: dragTable.vue
<template> <div class="w-table" :class="{'w-table_moving': dragState.dragging}"> <el-table :data="data" :ref="option.ref" :class="option.class" :stripe="option.stripe" :border="option.border" :height="option.height" :max-height="option.maxHeight" highlight-current-row : :cell-class-name="cellClassName" :header-cell-class-name="headerCellClassName" @sort-change="option.sortChange" > <slot name="fixed"></slot> <template v-for="(col, index) in tableHeader"> <el-table-column :label="col.label" :key="index" :prop="col.prop" :width="col.width" v-if="col.useTemplate==true"> <template slot-scope="scope"> <span v-html=col.useTemplateRes(scope.row)></span> </template> </el-table-column> <el-table-column v-else :key="index" :prop="col.prop" :label="col.label" :width="col.width" :min-width="col.minWidth" :type="col.type" :sortable="col.sortable" :header-align="col.headerAlign" :align="col.align" :column-key="index.toString()" :render-header="renderHeader" show-overflow-tooltip :formatter="col.formatter" > </el-table-column> <el-table-column :label="v.name" :key="k" :prop="v.prop" :width="v.width" v-else></el-table-column> </template> <!--<el-table-column v-for="(col, index) in tableHeader" :key="index" :prop="col.prop" :label="col.label" :width="col.width" :min-width="col.minWidth" :type="col.type" :sortable="col.sortable" :header-align="col.headerAlign" :align="col.align" :column-key="index.toString()" :render-header="renderHeader" show-overflow-tooltip :formatter="col.formatter" > </el-table-column>--> </el-table> </div> </template> <script> import Sortable from 'sortablejs' export default { name: "", data () { return { tableHeader: this.header, dragState: { start: -9, // 起始元素的 index end: -9, // 移動鼠標時所覆蓋的元素 index dragging: false, // 是否正在拖動 direction: undefined // 拖動方向 } } }, 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) } } }, [ // 添加 <a> 用于顯示表頭 label createElement('span', column.label), // 添加一個空標簽用于顯示拖動動畫 createElement('span', { 'class': ['virtual'] }) ]) }, // 按下鼠標開始拖動 handleMouseDown (e, column) { this.dragState.dragging = true this.dragState.start = parseInt(column.columnKey) // 給拖動時的虛擬容器添加寬高 let table = document.getElementsByClassName('w-table')[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); }, // 鼠標放開結束拖動 handleMouseUp () { this.dragColumn(this.dragState) // 初始化拖動狀態(tài) this.dragState = { start: -9, end: -9, dragging: false, direction: undefined } document.removeEventListener('mouseup', this.handleMouseUp); }, // 拖動中 handleMouseMove (e, column) { if (this.dragState.dragging) { let index = parseInt(column.columnKey) // 記錄起始列 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` : '') }, }, } </script> <style > @import '~@/assets/css/dragTable.css'; </style>
3. 調用封裝組件
<template> <div> <wTable :data="WarnResTable_Data_SS" :header="tableHeaderSS" :option="tableOptionSS"> <el-table-column type="index" slot="fixed" fixed prop="" label="序號" align="center" width="60" > </el-table-column> <el-table-column label="操作" slot="fixed" fixed prop="" width="95" align="center"> <template slot-scope="scope"> <el-button size="mini" @click="lookDetails(scope.$index, scope.row)">查看 </el-button> </template> </el-table-column> </wTable> </div> </template> <script> 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: '地市名稱', prop: 'dsmc', sortable: true, align:'center', width:'200', }, { label: '運維單位', prop: 'ywdw', align:'center', width:'200', }, { label: '變電站', prop: 'bdzmc', align:'center', width:'170', }, { label: '設備名稱', prop: 'sbmc', sortable: true, align:'center', width:'150', }, { label: '預警參數(shù)', prop: 'yjcs', align:'center', width:'150', }, { label: '預警類型', prop: 'yjlx', align:'center', width:'140', }, { label: '首次預警時間', prop: 'scyjsj', sortable:true, align:'center', width:'160', formatter:this.formatTime }, { label: '更新數(shù)據(jù)時間', prop: 'dqyjsj', sortable:true, align:'center', width:'160', formatter:this.formatTime }, { label: '預警描述', prop: 'yjgz', align:'center', width:'170', }, { label: '設備類型', prop: 'sblx', sortable:true, align:'center', width:'140', }, { label: '電壓等級', 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 } } </script>
感謝你能夠認真閱讀完這篇文章,希望小編分享的“Vue Element Sortablejs如何實現(xiàn)表格列的拖拽功能”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業(yè)資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。