Ant Design Vue Table中Table的列配置描述Columns属性

2024-01-28 20:49:28

在Ant Design Vue Table中，Columns属性是一个数组，用于配置表格的列。每个列配置项都是一个对象，可以包含以下属性：

title : 列标题。
dataIndex : 数据源字段的键名。
key : 列的唯一键。
width : 列的宽度，可以是数字（像素）或百分比。
fixed : 固定列，可以是"left"、"right"或true。
sorter : 排序函数，可以是函数或字符串。
filter : 过滤函数，可以是函数或字符串。
render : 渲染函数，可以是函数或字符串。

下面是一些示例代码，展示了如何使用Columns属性配置表格列：

<a-table :columns="columns" :data-source="data">
  <a-column title="姓名" data-index="name" width="100px" />
  <a-column title="年龄" data-index="age" width="100px" sorter="age" />
  <a-column title="地址" data-index="address" width="200px" />
</a-table>

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 100,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: 100,
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: '地址',
    dataIndex: 'address',
    width: 200,
  },
];