Posted on 2020-11-09 09:53 魏什么呀閱讀(5078) 評論(0) 收藏舉報

注意點：

1.需要拖拽的地方需要列設置必須有width，且值為數(shù)字，例如：width:100。(按理說應該可以在方法里設置，沒有寬度的列加一個默認值，但是我搞不出來)

2.需要拖拽的地方需要列設置必須有dataIndex,且同時有key和dataindex時，兩者需一樣

2.表格最后一列如果加上拖拽，會導致表格列超出10px，就是拖拽區(qū)域的寬度，這使?jié)L動條會超出表格，沒有發(fā)現(xiàn)更好的辦法，只有去掉最后一列的拖拽功能或者是樣式去掉最后一個th的寬度，我是全局樣式取消了最后一個th的寬度

.ant-table-thead>tr>th:last-child .table-draggable-handle{

width: 0px !important;

}

使用：

1.先安裝插件我用的固定版本網(wǎng)上說直接安裝會安裝最新的好像會出不來效果，以防萬一我直接固定了版本。

npm install --save vue-draggable-resizable@2.1.0

2.在main.js中全局引用

// 表格拖拽的功能

import VueDraggableResizable from 'vue-draggable-resizable'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

2.我是在s-table封裝的js里全局加上了表格拖拽的方法，如果只有個別使用，以下方法使用在單個文件中即可，以下文件是stable封裝的index.js里

import { resizeableTitle } from '@/utils/util'

this.components = {

header: {

cell: (h, props, children) => resizeableTitle(h, props, children, this.columns)

}

-------------------------------------------------------------------------------------------------------------

該方法放入了 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',

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;
}

我不給設置最小寬度拖拽的時候會出現(xiàn)錯位所以設置一下
.ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td{
min-width: 50px;
}

這樣頁面上不用做任何操作，只要保證表格列都有width，dataindex屬性即可使用。

刷新頁面返回頂部

魏什么丫

ant design 中s-table的表格拖拽功能