共计 3013 个字符,预计需要花费 8 分钟才能阅读完成。
目前我的项目要求对表格可进行宽度拖拽和排序拖拽。用的第三方库库 ant-desigin-vue。
对于列宽度拖拽
在 ant-desigin-vue 的 table 示例中有对应的案例,然而间接复制代码,会报错。最初看了源代码,对案例代码进行了批改。
装置第三方库
npm install vue-draggable-resizable --save
npm install sortablejs --save
引入
import VueDraggableResizable from 'vue-draggable-resizable';
Vue.component('vue-draggable-resizable', VueDraggableResizable);
import Sortable from 'sortablejs'
具体代码
<template>
<div>
<a-table bordered :columns="columns" :components="components" :data-source="data" :key="key">
<template v-slot:action>
<a href="javascript:;">Delete</a>
</template>
</a-table>
</div>
</template>
<script>
import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';
import Sortable from 'sortablejs'
Vue.component('vue-draggable-resizable', VueDraggableResizable);
let columns = [
{
title: 'Date1',
dataIndex: 'date',
width: 200,
filters:[]},
{
title: 'Amount',
dataIndex: 'amount',
width: 100,
},
{
title: 'Type',
dataIndex: 'type',
width: 100,
},
{
title: 'Note',
dataIndex: 'note',
width: 100,
},
{
title: 'Action',
key: 'action',
scopedSlots: {customRender: 'action'},
},
];
const data = [
{
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer',
},
{
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer',
},
{
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer',
},
];
const draggingMap = {};
columns.forEach(col => {draggingMap[col.key] = col.width;
});
const draggingState = Vue.observable(draggingMap);
//
const ResizeableTitle = (h, props, children) => {
let thDom = null;
const {key, ...restProps} = props;
const col = columns.find(col => {
const k = col.dataIndex || col.key;
return k === key;
});
if (!col.width) {
return h('th', {...restProps}, [children])
}
const onDrag = x => {draggingState[key] = 0;
col.width = Math.max(x, 1);
};
const onDragstop = () => {draggingState[key] = thDom.getBoundingClientRect().width;};
return (
h('th', {
...restProps,
attrs: {width: col.width,},
'v-ant-ref': r => (thDom = r),
class: 'resize-table-th'
}, [
children,
h('vue-draggable-resizable', {
class: 'table-draggable-handle',
on: {
dragging: onDrag,
dragstop: onDragstop
},
key: col.key,
props: {
w: 10,
x: draggingState[key] || col.width,
z: 1000,
axis: 'x',
resizable: false,
}
})
])
);
};
export default {
name: 'App',
data() {
this.components = {
header: {cell: ResizeableTitle,},
};
return {
data,
columns,
key: 0
};
},
mounted() {this.columnsDrop()
this.getFilterOptions()},
methods: {getFilterOptions() {this.columns[0].filters = [{
text: 'Joe',
value: 'Joe',
},
{
text: 'Jim',
value: 'Jim',
},]
},
// 列拖拽的初始化~~~~
columnsDrop() {const wrapperTr = document.querySelector('.ant-table-thead tr')
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
handle: '.ant-table-header-column', //~~ 可进行拖拽对应的类名~~~~~~
onEnd: evt => {const oldItem = this.columns[evt.oldIndex]
this.columns.splice(evt.oldIndex, 1)
this.columns.splice(evt.newIndex, 0, oldItem)
console.log(this.columns)
/**
此处是因为在拖拽后,内容排序失常,表头错乱的问题 --- 强制进行了从新渲染
**/
this.key += 1;
this.$nextTick(() => {this.columnsDrop();
});
}
})
}
}
};
</script>
<style lang="less">
.resize-table-th {
position: relative;
.table-draggable-handle {
height: 100% !important;
bottom: 0;
left: auto !important;
right: -5px;
cursor: col-resize;
touch-action: none;
position: absolute;
top: 0px;
z-index: 1;
user-select: auto;
width: 10px;
transform: none !important;
}
}
</style>
列拖拽
正文完