ant-design-vue/components/vc-table/demo/column-resize.js

/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index'
import '../assets/index.less'
import BaseMixin from '../../_util/BaseMixin'

const ResizeableTitle = (h, props, children) => {
  console.log(props)
  const { width, ...restProps } = props

  if (!width) {
    return <th {...restProps} >{children}</th>
  }
  return (
    <th {...restProps} width={width}>{children}</th>
  )
}

export default {
  mixins: [BaseMixin],
  data () {
    return {
      columns: [
        { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
        { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
        { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
        {
          title: 'Operations', dataIndex: '', key: 'd', customRender: () => {
            return <a href='#'>Operations</a>
          },
        },
      ],
      data: [
        { a: '123', key: '1' },
        { a: 'cdd', b: 'edd', key: '2' },
        { a: '1333', c: 'eee', d: 2, key: '3' },
      ],
      components: {
        header: {
          cell: ResizeableTitle,
        },
      },
    }
  },
  methods: {
    handleResize (index) {
      return (e, { size }) => {
        this.setState(({ columns }) => {
          const nextColumns = [...columns]
          nextColumns[index] = {
            ...nextColumns[index],
            width: size.width,
          }
          return { columns: nextColumns }
        })
      }
    },
  },

  render () {
    const columns = this.columns.map((col, index) => ({
      ...col,
      customHeaderCell: (column) => ({
        props: {
          width: column.width,
        },
        on: {
          resize: this.handleResize(index),
        },
      }),
    }))

    return (
      <div>
        <h2>Integrate with react-resizable</h2>
        <Table components={this.components} columns={columns} data={this.data} />
      </div>
    )
  },
}