antdesign中s-table的表格拖拽功能
注意点：
1.需要拖拽的地⽅需要列设置必须有width，且值为数字，例如：width:100。(按理说应该可以在⽅法⾥设置，没有宽度的列加⼀个默认值，但是我搞不出来)
2.需要拖拽的地⽅需要列设置必须有dataIndex，且同时有key和dataindex时，两者需⼀样
2.表格最后⼀列如果加上拖拽，会导致表格列超出10px，就是拖拽区域的宽度，这使滚动条会超出表格，没有发现更好的办法，只有去掉最后⼀列的拖拽功能或者是样式去掉最后⼀个th的宽度，我是全局样式取消了最后⼀个th的宽度
.ant-table-thead>tr>th:last-child .table-draggable-handle{
width: 0px !important;
}
使⽤：
1.先安装插件我⽤的固定版本⽹上说直接安装会安装最新的好像会出不来效果，以防万⼀我直接固定了版本。
npm install --save vue-draggable-resizable@2.1.0
2.在main.js中全局引⽤
// 表格拖拽的功能
import VueDraggableResizable from 'vue-draggable-resizable'
Vueponent('vue-draggable-resizable', VueDraggableResizable)
2.我是在s-table封装的js⾥全局加上了表格拖拽的⽅法，如果只有个别使⽤，以下⽅法使⽤在单个⽂件中即可，以下⽂件是stable封装的index.js⾥
import { resizeableTitle } from '@/utils/util'
thisponents = {
header: {
cell: (h, props, children) => resizeableTitle(h, props, children, lumns)
}
}
-------------------------------------------------------------------------------------------------------------
该⽅法放⼊了 util 公⽤⽅法⾥
// 表格拖拽列宽
export function resizeableTitle (h, props, children, columns) {
const { key, ...restProps } = props
const col = columns.find(col => {
const k = col.dataIndex || col.key
return k === key
})
if (!col || !col.width) {
return h('th', { ...restProps }, [...children])
}
const dragProps = {
key: col.dataIndex || col.key,
class: 'table-draggable-handle',antdesignvue 配置外部文件
attrs: {
w: 10,
x: col.width,
z: 1,
axis: 'x',
draggable: true,
resizable: false
},
on: {
dragging: (x, y) => {
col.width = Math.max(x, 1)
}
}
}
const drag = h('vue-draggable-resizable', { ...dragProps })
return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
}
--------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------样式：
//表格拖拽列宽
.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;
}
}
.table-draggable-handle.active {
border: none !important;
padding: 0 3px;
color: #2BCCAE;
}
我不给设置最⼩宽度拖拽的时候会出现错位所以设置⼀下
.ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td{
min-width: 50px;
}
这样页⾯上不⽤做任何操作，只要保证表格列都有width，dataindex属性即可使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。