Vue2.7 setup语法支持antV表格伸缩列

前言

vue2.7 使用 antdesign 的 table 组件，支持伸缩列，使用 vue3 setup 语法

定义components

const components = reactive({
  header: {
    cell: (h, props, children) => {
      const { key, ...restProps } = props;
      const col = tableData.columns.find(colItem => {
      const k = colItem.dataIndex || colItem.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, 10);//留出空白
          }
      }
    };
      restProps.attrs.widh = col.width;
      const drag = h('vue-draggable-resizable', { ...dragProps });
      return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
    }
  },
}) 

// css 部分
.resize-table-th {
    position: relative;
    .table-draggable-handle {
        height: 100% !important;
        bottom: 0;
        left: auto !important;
        right: -5px;
        cursor: col-resize;
        touch-action: none;
        transform: translate(0px, 0px) !important;
        position: absolute;
        top: 0;
    }
}
`