antd中 有一个表格可拖动的插件叫做vue-draggable-resizable的插件,但是按照官方文档来进行安装及引用会有一系列的报错,如下:
antd vue官方文档源代码:
<template>
<a-table bordered :columns="columns" :components="components" :data-source="data">
<template v-slot:action>
<a href="javascript:;">Delete</a>
</template>
</a-table>
</template>
<script>
import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';
Vue.component('vue-draggable-resizable', VueDraggableResizable);
const columns = [
{
title: 'Date',
dataIndex: 'date',
width: 200,
},
{
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 <th {...restProps}>{children}</th>;
}
const onDrag = x => {
draggingState[key] = 0;
col.width = Math.max(x, 1);
};
const onDragstop = () => {
draggingState[key] = thDom.getBoundingClientRect().width;
};
return (
<th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
{children}
<vue-draggable-resizable
key={col.key}
class="table-draggable-handle"
w={10}
x={draggingState[key] || col.width}
z={1}
axis="x"
draggable={true}
resizable={false}
onDragging={onDrag}
onDragstop={onDragstop}
></vue-draggable-resizable>
</th>
);
};
export default {
name: 'App',
data() {
this.components = {
header: {
cell: ResizeableTitle,
},
};
return {
data,
columns,
};
},
};
</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;
}
}
</style>
调整后代码:
<template>
<a-table
bordered
:columns="columns"
:components="components"
:data-source="data"
>
<template v-slot:action>
<a href="javascript:;">Delete</a>
</template>
</a-table>
</template>
<script>
import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);
const columns = [
{
title: "Date",
dataIndex: "date",
width: 200,
},
{
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 <th {...restProps}>{children}</th>;
}
const onDrag = (x) => {
draggingState[key] = 0;
col.width = Math.max(x, 1);
};
const onDragstop = () => {
draggingState[key] = thDom.getBoundingClientRect().width;
};
return (
<th
{...restProps}
v-ant-ref={(r) => (thDom = r)}
width={col.width}
class="resize-table-th"
>
{children}
<vue-draggable-resizable
key={col.key}
class="table-draggable-handle"
w={10}
x={draggingState[key] || col.width}
z={1}
axis="x"
draggable={true}
resizable={false}
onDragging={onDrag}
onDragstop={onDragstop}
></vue-draggable-resizable>
</th>
);
};
export default {
name: "App",
data() {
this.components = {
header: {
cell: resizeableTitle,
},
};
return {
data,
columns,
};
},
};
</script>
<style lang="less">
.resize-table-th {
position: relative;
.table-draggable-handle {
transform: none !important;
position: absolute;
height: 100% !important;
bottom: 0;
left: auto !important;
right: -5px;
cursor: col-resize;
touch-action: none;
}
}
</style>