前言

在日常前端开发中，表格（Table）是使用频率极高的组件之一。Ant Design Vue 作为企业级UI框架，提供了功能丰富的Table组件，但官方版本并未直接提供列宽拖拽调整的功能。本文将详细介绍如何为Ant Design Vue的表格添加流畅的列宽拖拽功能，提升用户交互体验。

一、需求

实现后的表格将具备以下能力：

• 通过拖拽表头分隔线调整列宽
• 平滑的拖拽视觉反馈
• 设置最小和最大列宽限制
• 兼容Ant Design Vue的原有所有表格功能

二、使用resizeColumn事件和column的resizable属性

ant-design-vue表格官网：https://www.antdv.com/components/table-cn/#api


从官方文档可以看出，必须使用3.0以上的版本才可以实现列宽度的拖拽。

<a-table
      :dataSource="tableData"
      :columns="columns"
      rowKey="id"
      bordered
      @resizeColumn="handleResizeColumn"
    >
</a-table>

const columns = ref([
    {
      title: '序号',
      width: 100,
      dataIndex: 'seq',
      fixed: 'left',
      resizable: true,
    },
    {
      title: '订单名称',
      dataIndex: 'orderName',
      ellipsis: true,
      width: 200,
      fixed: 'left',
      resizable: true,
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      ellipsis: true,
      width: 100,
      resizable: true,
    },
    {
      title: '订单号',
      dataIndex: 'orderNo',
      ellipsis: true,
      width: 140,
      resizable: true,
    },
   )];

  const handleResizeColumn = (w, col) => {
    col.width = w;
  };

实现效果如下