antd table 可伸缩列 react-resizable 多表头实现

Posted 2023-05-11

参考技术A antd 自带的可伸缩列控制列宽，不能对多表头、合并单元格的table起效果，于是优化了一下

antd table实现可伸缩列

前段时间客户要求table列需要可拖拽功能，狂问度娘，大部分都是从antd官网上面copy的。

极个别的不是，但是含有选择框的就不行了

最后还是找到了： https://www.jianshu.com/p/89b8ccd1eca0

 

需要用到插件 vue-draggable-resizable，安装最新的就行 无需指定版本

cnpm install --save vue-draggable-resizable

 

  <a-table bordered :columns="columns" :components="components" :row-selection="rowSelection" :data-source="data">
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>
  </a-table>

 

<script>
import Vue from \'vue\'
import VueDraggableResizable from \'vue-draggable-resizable\'
Vue.component(\'vue-draggable-resizable\', VueDraggableResizable)

export default {
  name: \'arrival\',
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
        },
      }
    },
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
          const col = this.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])
        }
      }
    }
    return {
      data: [
        {
          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\'
        }
      ],
      columns: [
        {
          title: \'Date\',
          ellipsis: true,
          dataIndex: \'date\',
          width: 200
        },
        {
          title: \'Amount\',
          ellipsis: true,
          dataIndex: \'amount\',
          width: 100
        },
        {
          title: \'Type\',
          ellipsis: true,
          dataIndex: \'type\',
          width: 100
        },
        {
          title: \'Note\',
          ellipsis: true,
          dataIndex: \'note\',
          width: 100
        },
        {
          title: \'Action\',
          ellipsis: true,
          key: \'action\',
          scopedSlots: { customRender: \'action\' }
        }
      ]
    }
  }
}
</script>

 

<style>
.resize-table-th {
  position: relative;
}
.table-draggable-handle {
  position: absolute;
  transform: none !important;
  bottom: 0;
  height: 100% !important;
  left: auto !important;
  right: -5px;
  cursor: col-resize;
  touch-action: none;
  border: none;
}
</style>