Vue Element Sortablejs实现表格列的拖拽案例详解
短信预约 -IT技能 免费直播动态提醒
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,
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实现表格列的拖拽内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
