ant design 中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'

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

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

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