基于Ant Design Vue创建的vue项目中表格组件的使用
Posted bingchenzhilu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于Ant Design Vue创建的vue项目中表格组件的使用相关的知识,希望对你有一定的参考价值。
近期项目中使用到了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项目中表格组件的使用的主要内容,如果未能解决你的问题,请参考以下文章