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

Posted on 2020-11-09 09:53  魏什么呀  阅读(4915)  评论(0)  编辑  收藏  举报

注意点：

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属性即可使用。