Ant Design Vue 中table的使用

1、首先复制你需要的样式代码其中table中涉及到的主要功能

        1）vue中的 slot 插槽的使用  ----- 及对于数据中的 图片的数据、状态数据进行可视化管理

                实例样式：

                

                 用到的ant design vue

                实例代码：

                        html中：在 a-table 的配置

                                

                        配置参数colums中：

                                

        2)  计步器的使用来实现table翻页的功能

                当不需要计步器的时候：

<a-table :columns="columns" :data-source="data" style="margin-top:10px" :pagination="false"></a-table>

                

        需要计步器进行分页操作时：

        html中

<a-table :columns="columns" :data-source="data" style="margin-top:20px" :pagination="pagination" :rowKey="record=>record.Id"></a-table>

 js中主要代码 pagination配置项：

  pagination: {
        current: 1,
        defaultCurrent: 1,
        defaultPageSize: 10,
        hideOnSinglePage: false,
        showQuickJumper: true,
        total: 20,
        onChange: (pages) => {
          this.changepage(pages)
        }
      },

说明字段：