用Vue Table二次封装Ant Design，实现灵活的列伸缩功能

2023-12-19 19:57:56

增强 Ant Design 表格：实现列伸缩功能

背景

Ant Design 是一个流行的 React UI 库，以其美观、强大和易用性而闻名。其丰富的组件库包括 Table 组件，用于显示和操作表格数据。然而，Ant Design Table 的原生功能缺少列伸缩特性，限制了用户对表格的可定制性。

解决方案：使用 vue-draggable-resizable

为了解决这一问题，我们可以借助 vue-draggable-resizable 库，对 Ant Design Table 进行二次封装，实现列伸缩功能。vue-draggable-resizable 是一个 Vue.js 插件，允许我们轻松地对 DOM 元素进行拖放和调整大小。

实现步骤

1. 安装依赖

首先，使用 npm 或 yarn 安装 vue-draggable-resizable 依赖：

npm install vue-draggable-resizable

2. 配置 Ant Design 表格

接下来，在 Ant Design Table 组件中添加以下属性和样式：

components 属性： 注册 vue-draggable-resizable 组件，使其能够使用拖拽和调整列宽的功能。

<Table
  :columns={columns}
  :data={data}
  components={{
    header: {
      cell: vueDraggableResizable,
    },
    body: {
      row: vueDraggableResizable,
      cell: vueDraggableResizable,
    },
  }}
/>

样式： 添加 CSS 样式以启用拖拽和调整列宽的功能。

.ant-table-header th,
.ant-table-body td {
  cursor: col-resize;
}

完整代码

以下是一个完整的代码示例，展示了如何对 Ant Design Table 进行二次封装以实现列伸缩功能：

import { Table } from 'ant-design-vue';
import vueDraggableResizable from 'vue-draggable-resizable';

const App = {
  components: { Table, vueDraggableResizable },
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', width: 150 },
        { title: 'Age', dataIndex: 'age', width: 100 },
        { title: 'Address', dataIndex: 'address' },
      ],
      data: [
        { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
        { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
        { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
      ],
    };
  },
  render() {
    return (
      <Table
        :columns={columns}
        :data={data}
        components={{
          header: {
            cell: vueDraggableResizable,
          },
          body: {
            row: vueDraggableResizable,
            cell: vueDraggableResizable,
          },
        }}
      />
    );
  },
};

使用方式

使用封装后的 Table 组件非常简单，只需像使用普通 Table 组件一样即可。

<template>
  <div>
    <Table
      :columns="columns"
      :data="data"
    />
  </div>
</template>

<script>
import { Table } from 'ant-design-vue';
import { columns, data } from './tableData';

export default {
  components: { Table },
  data() {
    return {
      columns,
      data,
    };
  },
};
</script>