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)
}
},
说明字段: