Vue Element Sortablejs实现表格列的拖拽案例详解
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
:style="{ width: parseInt(option.width)+'px' }" :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)
// 初始化拖动状态
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,
香港服务器http://www.558idc.com/hk.html align:'center',
width:'150',
},
{
label: '预警参数',
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: '更新数据时间',
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:'hhhhh1'},
{dsmc:'dsmc2',sbmc:'sbmc2',dydjid:'hhhhh2'},
{dsmc:'dsmc3',sbmc:'sbmc3',dydjid:'hhhhh3'}
],
}
},
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实现表格列的拖拽案例详解的文章就介绍到这了,更多相关Vue Element Sortablejs实现表格列的拖拽内容请搜索hwidc以前的文章或继续浏览下面的相关文章希望大家以后多多支持hwidc！