标签：col sel sele vue htm 页面 hone 需要 调用
近期项目中使用到了ant design，下面来讲一下里面table组件的使用
1.基础：引入ant-design-vue组件
2
<a-table
v-else
:columns="columns"
:dataSource="data"
:pagination="pagination"
@change="pageChange"
:loading=‘loading‘
>
</a-table>
其中：columns表示的是表头：
const columns = [
{
title: ‘姓名‘,
key: ‘name ‘,
dataIndex: ‘name‘,-------需要和后台返回的数据同名
align: ‘center‘,
width: ‘30%‘----宽度，可以指定也可以直接为数值
},
{
title: ‘电话‘,
key: ‘phone‘,
dataIndex: ‘phone‘,
align: ‘center‘,
width: ‘30%‘
},
{
title: ‘操作‘,
key: ‘action‘,
scopedSlots: { customRender: ‘action‘ },--------后台返回的对象，数组，或者删除编辑操作，不便直接展示-------此处即表示渲染action插槽
align: ‘center‘,
width: ‘30%‘
}
]
dataSource:表示返回的数据，将后台返回的数据赋值即可
pagination:设置当前的currentPage(当前页码),pageSize（每页数据条数）,total（数据总条数）下面是pagination的写法，可以在请求数据的时候，传入相应的值同时为total赋值
pagination: {
pageSize: 6,
current: 1,
total: 0
},
pageChange：翻页，再次调用查询接口，传入相应页码，页面数据条数即可
pageChange(pagination) {
this.pagination = pagination
this.select()
}
loading是加载动画。当数据未显示的时候可以使用loading为true,待获取到数据，改为false即可
插槽使用：
1 <div slot="action" slot-scope="text, record">----------record即每条数据，相当于v-for中定义的item,如有编辑操作，则根据需要传递值 2 <template> 3 <a @click="Delete(record)" style="color:#DC322F;">删除</a> 4 </template> 5 </div>
<span slot="address" slot-scope="text,record"> {{record.time}} <br /> {{record.address}} </span>
第一次使用这个框架，部分解决方法不够简便，只在于能够实现功能，如有高手。欢迎指正
基于Ant Design Vue创建的vue项目中表格组件的使用
标签：col sel sele vue htm 页面 hone 需要 调用
原文地址：https://www.cnblogs.com/bingchenzhilu/p/11858848.html
