表格拖拽应该是个很基础的功能了,一般功能全一些的table插件都会带着,并且文档也简洁易懂,然而,我却在ant-design-vue这个ui组件库碰了壁,官方表格伸缩列示例粘贴过来会报错的好嘛,再加上这个功能甲方爸爸提了很多次,就不得不勇敢面对了!!那就让我用baidu、google
+ c v
大法来解决下,结果网上的文章不是不能用就是不好用,那就只能靠自己了,下面就把代码贴上,在贴上前,要先安装两个jsx的插件和vue-draggable-resizable拖拽插件,很简单,命令如下
npm install --save-dev @vue/babel-preset-jsx
@vue/babel-helper-vue-jsx-merge-props //或者 yarn add @vue/babel-preset-jsx
@vue/babel-helper-vue-jsx-merge-props -D //然后 安装vue-draggable-resizable插件
注意版本号是2.1.0 npm install vue-draggable-resizable@2.1.0 //或者 yarn add
vue-draggable-resizable@2.1.0
然后新建个vue文件,把下面代码粘上去
<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 draggingMap = {}; columns.forEach((col) => {
draggingMap[col.key] = col.width; }); // const draggingState =
Vue.observable(draggingMap); 状态共享,如果你需要的话可以加上 vue 需要2.6.0以上 export default {
name: "sortTable", data() { return { datas: [ { 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", }, ], draggingState: draggingMap,
}; }, render(h) { return ( <a-table bordered columns={columns} components={{
header: { cell: (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) => {
this.draggingState[key] = 0; col.width = Math.max(x, 1); }; const onDragstop =
() => { this.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={this.draggingState[key] || col.width}
z={1} axis="x" draggable={true} resizable={false} onDragging={onDrag}
onDragstop={onDragstop} ></vue-draggable-resizable> </th> ); }, }, }}
data-source={this.datas} ></a-table> ); }, }; </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; } } </style>
好了,现在你在看看是不是可以拖拽了?不行?留言我来帮你解决

技术
©2019-2020 Toolsou All rights reserved,
css中上下左右居中的几种实现方法[CISCN 2019 初赛]Love Mathc/c++语言实现登陆界面Unity3D 人称设置(第一人称视角、第三人称视角)Fastadmin框架自定义搜索操作流程2021最新Python自动化软件测试笔试题(含答案)黑客帝国装逼的代码雨mysql数据库设置字符集配置修改my.ini文件(windows)python之panda模块1Python学习笔记:基础+进阶10道练习题