ant design vue table可伸缩

<template>
  <a-table
    bordered
    :columns="columns"
    :components="components"
    :data-source="data"
    :scroll="{ x: 'calc(1000px + 50%)', y: tableHeight }"
  >
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>
  </a-table>
</template>

<script>
const columns = [
  {
    title: 'Date',
    dataIndex: 'date',
    width: 100,
    ellipsis: true,
  },
  {
    title: 'Long',
    dataIndex: 'address',
    width: 100,
    ellipsis: true,
  },
  {
    title: 'Amount',
    dataIndex: 'amount',
    width: 100,
  },
  {
    title: 'Type',
    dataIndex: 'type',
    width: 100,
  },
  {
    title: 'Note',
    dataIndex: 'note',
    width: 100,
  },
  {
    title: 'date1',
    dataIndex: 'date1',
    width: 100,
  },
  {
    title: 'amount1',
    dataIndex: 'amount1',
    width: 100,
  },
  {
    title: 'type1',
    dataIndex: 'type1',
    width: 100,
  },
  {
    title: 'note',
    dataIndex: 'notenotenote',
    width: 100,
    ellipsis: true,
  },
  {
    title: 'date2',
    dataIndex: 'date2',
    width: 100,
  },
  {
    title: 'amount2',
    dataIndex: 'amount2',
    width: 100,
  },
  {
    title: 'type2',
    dataIndex: 'type2',
    width: 100,
  },
  {
    title: 'notenote',
    dataIndex: 'notenote',
    width: 100,
  },
]
const data = [
  {
    key: 0,
    date: '2018-02-11342432432423',
    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',
  },
  {
    key: 3,
    date: '2018-02-11342432432423',
    amount: 120,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 4,
    date: '2018-03-11',
    amount: 243,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 5,
    date: '2018-04-11',
    amount: 98,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 6,
    date: '2018-02-11342432432423',
    amount: 120,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 7,
    date: '2018-03-11',
    amount: 243,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 8,
    date: '2018-04-11',
    amount: 98,
    type: 'income',
    note: 'transfer',
  },

  {
    key: 9,
    date: '2018-02-11342432432423',
    amount: 120,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 10,
    date: '2018-03-11',
    amount: 243,
    type: 'income',
    note: 'transfer',
  },
  {
    key: 11,
    date: '2018-04-11',
    amount: 98,
    type: 'income',
    note: 'transfer',
  },
]

export default {
  name: 'App',
  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,
      columns,
    }
  },
}
</script>
<style lang="less">
.resize-table-th {
  position: relative;
  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
    position: absolute;
  }
}
</style>