在Vue3中table表格组件怎么用,有什么使用技巧
Admin 2022-06-18 群英技术资讯 670 次浏览
在大量数据需要展示时,我们一般都会以报表的形式展现,按照直觉习惯,肯定使用table
表格来展示行列数据。
因此,我们要使用Ant Design Vue
组件库中的table
组件,来进行数据的绑定。
官网地址:https://2x.antdv.com/components/table-cn#API
我们先对电子书管理页面改造,将布局进行调整,
示例代码如下:
<template> <a-layout class="layout"> <a-layout-content :style="{ background: '#fff', padding: '24px', minHeight: '280px' }"> <div class="about"> <h1>电子书管理页面</h1> </div> </a-layout-content> </a-layout> </template>
效果如下:
要做的事:
slots
: 自定义渲染title
: 表头渲染customRender
: 值渲染示例代码如下:
<template> <a-layout class="layout"> <a-layout-content :style="{ background: '#fff', padding: '24px', minHeight: '280px' }"> <a-table :columns="columns" :data-source="ebooks1" :pagination="pagination" :loading="loading" > <template #cover="{ text: cover }"> <img v-if="cover" :src="cover" alt="avatar"/> </template> <template #name="{ text: name }"> <a>{{ text }}</a> </template> <template #customTitle> <span> <smile-outlined/> Name </span> </template> <template #action="{ record }"> <span> <a-space size="small"> <a-button type="primary" @click="edit(record)"> 编辑 </a-button> <a-button type="danger"> 删除 </a-button> </a-space> </span> </template> </a-table> </a-layout-content> </a-layout> </template> <script lang="ts"> import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue'; import {defineComponent, onMounted, reactive, ref, toRef} from 'vue'; import axios from 'axios'; export default defineComponent({ name: 'AdminEbook', setup() { const pagination = { onChange: (page: number) => { console.log(page); }, pageSize: 3, }; const loading = ref(false); const columns = [ { title: '封面', dataIndex: 'cover', slots: {customRender: 'cover'} }, { title: '名称', dataIndex: 'name' }, { title: '分类一', dataIndex: 'category1Id', key: 'category1Id', }, { title: '分类二', dataIndex: 'category2Id', key: 'category2Id', }, { title: '文档数', dataIndex: 'docCount' }, { title: '阅读数', dataIndex: 'viewCount' }, { title: '点赞数', dataIndex: 'voteCount' }, { title: 'Action', key: 'action', slots: {customRender: 'action'} } ]; //使用ref进行数据绑定 const ebooks = ref(); // 使用reactive进行数据绑定 const ebooks1 = reactive({books: []}) onMounted(() => { axios.get("/ebook/list?name=").then(response => { const data = response.data; ebooks.value = data.content; ebooks1.books = data.content; }) }) return { pagination, loading, columns, ebooks1: ebooks, ebooks2: toRef(ebooks1, "books") } }, components: { SmileOutlined, DownOutlined, }, }); </script> <style scoped> img { width: 50px; height: 50px; } </style>
实际效果:
对于table
组件的使用不是很熟的话,需要不断去尝试,简单说,就是对象属性的映射。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本文主要介绍了el-upload多选文件上传报错解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
1.中间件①挂载中间件的函数:app.usevarhttp=require('http');varexpress=require('express');varapp=express();使用自定义中间件app.use('/',function(req,res,next){ console
本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了事件委托、判断URL是否合法以及全排列的相关内容,下面一起来看一下,希望对大家有帮助。
微信小程序滚动定位的效果如何实现?滚动定位的效果也就是点击小程序导航标签会滚动定位到对应位置,具体实现效果如下。那么这个效果该怎样做呢?接下来我们一起来了解看看实现代码。
目录累加/累积求最大/最小值格式化搜索参数反序列化搜索参数拉平嵌套数组实现 flat数组去重数组计数获取对象多个属性反转字符串不知道大家平常用 Reduce 多不多,反正本瓜用的不多。但实际上,Reduce 能做的,比我们能想到的要多得多,本篇带来 10 个Reduce 常用场景和技巧,一定有你不知道~冲ヾ(◍°∇°◍
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008