Ant Design Vue list表格组件

文章目录

1.案例部分代码
2. 简述
3.案例代码

1.案例部分代码

 <a-table:columns="columns":row-key="record => record.id":data-source="ebooks":pagination="pagination":loading="loading"@change="handleTableChange"><template #cover="{ text: cover }"><img v-if="cover" :src="cover" alt="avatar"/></template><template v-slot:action="{ text, record }"><a-space size="small"><a-button type="primary">编辑</a-button><a-button type="danger">删除</a-button></a-space></template></a-table>

2. 简述

1.:columns 定义列数
2.row-key  定义key 一般采用id不重复唯一即可
3.data-source 数据来源，为后端返回的数据列表list
4.:pagination 分页标签，请求后端查询携带当前页和每页显示的条数2个参数，后端需要返回总共多少条数total，前端接收到total后，自动实现分页
5.:loading 加载效果，默认不显示，请求后端查询过程中显示加载效果，后端有返回就关闭加载效果。返回分为成功和    失败2种
6.@change="handleTableChange 点击左下角，分页参数，此事件就会监听到，当前是第几页page，每页显示多少条size，这2个参数，然后请求后端查询接口，完成分页效果。注：关于具体每条显示多少条这里默认是固定的，可以是动态的，例如：页面可以显示当前页可以可显示的条数，传递参数，请求后端效果是一样的。后期可以优化。

3.案例代码

<template><a-layout><a-layout-content:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"><a-table:columns="columns":row-key="record => record.id":data-source="ebooks":pagination="pagination":loading="loading"@change="handleTableChange"><template #cover="{ text: cover }"><img v-if="cover" :src="cover" alt="avatar"/></template><template v-slot:action="{ text, record }"><a-space size="small"><a-button type="primary">编辑</a-button><a-button type="danger">删除</a-button></a-space></template></a-table></a-layout-content></a-layout>
</template><script lang="ts">
import {defineComponent, onMounted, ref} from 'vue'
import axios from 'axios'export default defineComponent({name: 'AdminEbook',setup() {//定义响应式变量const ebooks = ref()//定义初始化分页参数const pagination = ref({//当前页current: 1,//每页的分页条数pageSize: 4,total: 0})//初始化加载效果无const loading = ref(false)//表格const columns = [{title: '封面',dataIndex: 'cover',//特殊渲染slots: {customRender: 'cover'}},{title: '名称',dataIndex: 'name'},{title: '分类',dataIndex: 'category'},{title: '文档数',dataIndex: 'docCount'},{title: '阅读数',dataIndex: 'viewCount'},{title: '点赞数',dataIndex: 'voteCount'},{title: 'Action',key: 'action',slots: {customRender: 'action'}}];/*** 数据查询*/const handleQuery = (params: any) => {console.log("当前页：" + params.page);console.log("每页的分页条数：" + params.size);loading.value = true;axios.get("/ebook/list", {params: {page: params.page,size: params.size}}).then((response) => {loading.value = false;const data = response.data;ebooks.value = data.content.list;//  重置分页按钮pagination.value.current = params.page;//总条数pagination.value.total = data.content.total;console.log("后端返回查询总条数：" + data.content.total);});};/*** 表格点击页码时触发*/const handleTableChange = (pagination: any) => {// console.log("当前页：" + pagination.current);// console.log("每页的分页条数：" + pagination.pageSize);handleQuery({page: pagination.current,size: pagination.pageSize});};onMounted(() => {handleQuery({page: 1,size: pagination.value.pageSize});})return {ebooks,pagination,loading,columns,handleTableChange}}
})
</script>
<style scoped>
img {width: 50px;height: 50px;
}
</style>

Ant Design Vue list表格组件相关推荐

ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
ant design vue 的 description组件中 label 默认样式的更改
这两天做项目,需要实现一个如下图的效果于是我就去 ant design vue 里面找,发现 description 组件符合这个效果但是写完之后我发现,这个组件的 label 并不能修改样式啊, ...
Ant Design Vue LocaleProvider国际化组件zh_CN中文配置
举个栗子,我在项目中遇到了一个问题,table组件的分页器页数默认显示为英文, 查了一下,可以用<a-locale-provide>标签去实现,使用过程中发现这个标签已经废弃,于是总结出以 ...
Ant Design Vue笔记——表格详情
1.表格中添加详情按钮 <template><a-tableref="table"size="middle"borderedrowKey=&q ...
Ant Design vue 改变表格背景颜色
写这篇文章之前,我已经和经理掰扯半天了.我实现的代码写成文档,复制到他的电脑上没效果.我自己的电脑就可以实现功能.一开始我写的代码也没有效果,但改来改去突然就可以了,写成原来的样子也可以实现了,没研究 ...
ant design vue 清空upload组件图片缓存的方法
当关闭这个窗口后,再次打开,上传上传的图片清空在upload 这个组件外加一个key 赋随机值,便可清除缓存缓存代码如下: <a-modal v-model="visible&qu ...
Ant Design Vue子表格展开只展开一行，其他行折叠
背景因为我的子列表数据都是用的一个变量,所以需要折叠其他的,要不然多个表格展开后,数据渲染都是一样的下列列表是只可以展开一列的: 第一步: 直接抄我箭头指的那三行即可 :row-key=" ...

Ant Design Vue list表格组件

文章目录

1.案例部分代码

2. 简述

3.案例代码

Ant Design Vue list表格组件相关推荐

最新文章

热门文章