ant-design-vue, a-table, 自动生成序号列
在ant-design-vue
的a-table
组件中,可以通过设置a-table-column
的key
为index
来自动生成序号列。序号列的值将是当前行的索引(从0开始计数)。
以下是一个简单的例子:
<template>
<a-table :dataSource="data">
<a-table-column key="index" title="序号" />
<a-table-column key="name" title="姓名" dataIndex="name" />
<a-table-column key="age" title="年龄" dataIndex="age" />
</a-table>
</template>
<script>
export default {
data() {
return {
data: [
{ key: '1', name: 'John Doe', age: 32 },
{ key: '2', name: 'Jane Doe', age: 28 },
// ...更多数据
],
};
},
};
</script>
在这个例子中,我们定义了一个包含三列的表格:序号列、姓名列和年龄列。序号列通过设置key="index"
自动生成。
请确保您已经正确安装并导入了ant-design-vue
库,并且在您的项目中使用了所需的样式文件。
评论已关闭