antd 表格 a-table

最新推荐文章于 2024-06-17 01:54:12 发布

努力搬砖的小码

最新推荐文章于 2024-06-17 01:54:12 发布

阅读量126

点赞数

分类专栏： antd 文章标签： html java

本文链接：https://blog.csdn.net/weixin_63199745/article/details/130006119

版权

antd 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

此文章展示了一个使用AntDesign的表格组件（a-table）来显示带有分页和详细列信息的数据，包括ID、试题、各个选项及答案。表格配置了rowKey以确保每行的唯一性，并设置了不同的宽度以优化列显示。

摘要由CSDN通过智能技术生成

1、

   <a-table
          ref="table"
          bordered
          :pagination="true"
          :rowKey="(record) => record.id"
          :data-source="onDutyList"
          :columns="columnsTable"
          class="charge-table"
          size="middle"
        >
        </a-table>

borded : 显示所有的格格

pagination: 显示分页

2、

    columnsTable: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: '10px'
        },
        {
          title: '试题',
          dataIndex: 'title',
          width: '150px'
        },
        {
          title: '选项A',
          dataIndex: 'chose_a',
          width: '130px'
        },
        {
          title: '选项B',
          dataIndex: 'chose_b',
          width: '130px'
        },
        {
          title: '选项C',
          dataIndex: 'chose_c',
          width: '130px'
        },
        {
          title: '选项D',
          dataIndex: 'chose_d',
          width: '130px'
        },
        {
          title: '答案',
          dataIndex: 'answer',
          width: '40px'
        }
      ],