antd表格实现列宽拖动！！！

antd的列宽拖动集成 vue-draggable-resizable 插件来实现可伸缩列。

 columns是表头，data-source是我们要渲染的数据，然后重点加上

:components="components"

在我们要使用的页面引入

import Vue from 'vue';

import VueDraggableResizable from 'vue-draggable-resizable';

Vue.component('vue-draggable-resizable', VueDraggableResizable);

注意：每个表头必须要有宽度！！！切记

const columnsData = [

  {

    title: "序号",

    dataIndex: "key",

    key: "key",

    width: 70,

    defaultSortOrder: 'ascend',

    sorter: (a, b) => a.key - b.key,

  },

  {

    title: "品类",

    dataIndex: "materialName",

    key: "materialName",

    width: 80,

   

    ellipsis: true,

  },

  {

    title: "规格",

    dataIndex: "spec",

    key: "spec",

    width: 80,

    ellipsis: true,

    scopedSlots: { customRender: "spec" },

  },

  // {

  //   title: "需要数量",

  //   dataIndex: "plannedQuantity",

  //   key: "plannedQuantity",

  //   width: 120,

  //   scopedSlots: { customRender: "plannedQuantity" },

  // },

  {

    title: "需要量",

    dataIndex: "planWeight",

    key: "planWeight",

    width: 120,

    scopedSlots: { customRender: "planWeight" },

  },

  // {

  //   title: "数量单位",

  //   dataIndex: "quantityUnit",

  //   key: "quantityUnit",

  //   width: 100,

  // },

  // {

  //   title: "重量单位",

  //   dataIndex: "weightUnit",

  //   key: "weightUnit",

  //   width: 100,

  // },

  // {

  //  title: '生产厂家',

  //  dataIndex: 'supplierName',

  //  key: 'supplierName',

  //  width:120,

  //  scopedSlots: { customRender: 'supplierName' },

  // },

  // {

  //  title: '物料编码',

  //  dataIndex: 'materialCode',

  //  key: 'materialCode',

  //  ellipsis: true,

  // },

  // {

  //  title: '辅助规格',

  //  dataIndex: 'materialInformation',

  //  key: 'materialInformation',

  //  ellipsis: true,

  // },

  {

    title: "技术标准",

    dataIndex: "technicalStandard",

    key: "technicalStandard",

    ellipsis: true,

    width: 120,

  },

  {

    title: "加工方式",

    dataIndex: "processMode",

    key: "processMode",

    ellipsis: true,

    width: 120,

  },

];

重点在于下面这几行代码！

const draggingMap = {}

columnsData.forEach(col => {

  draggingMap[col.key] = col.width

})

const draggingState = Vue.observable(draggingMap)

const resizeableTitle = (h, props, children) => {

  let thDom = null

  const { key, ...restProps } = props

  let col = {}

  if (key === 'selection-column') {

    //支持复选框

    col = {

      dataIndex: 'selection-column',

      key: 'selection-column',

      width: 40

    }

  } else {

    col = columnsData.find(col => {

      const k = col.dataIndex || col.key

      return k === key

    })

  }

  if (!col.width) {

    return <th {...restProps}>{children}</th>

  }

  const onDrag = x => {

    draggingState[key] = 0

    col.width = Math.max(x, 1)

  }

  const onDragstop = () => {

    draggingState[key] = thDom.getBoundingClientRect().width

  }

  return (

    <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">

      {children}

      <vue-draggable-resizable

        key={col.key}

        class="table-draggable-handle"

        w={10}

        x={draggingState[key] || col.width}

        z={1}

        axis="x"

        draggable={true}

        resizable={false}

        onDragging={onDrag}

        onDragstop={onDragstop}

      ></vue-draggable-resizable>

    </th>

  )

}

还要在created中：

  created() {

    this.components = {

      header: {

        cell: resizeableTitle

      }

    }

  },  

components在data中先声明：{}

还有就是样式千万不要忘记复制了！

.resize-table-th {

  position: relative;

}

.resize-table-th   .table-draggable-handle {

    transform: none !important;

    position: absolute;

    height: 100% !important;

    bottom: 0;

    left: auto !important;

    right: -5px;

    cursor: col-resize;

    touch-action: none;

  }