Vue3table表格组件的使⽤
⽬录
⼀、Ant Design Vue
1、官⽹地址
2、怎么使⽤
3、将电⼦书表格进⾏展⽰
⼆、总结
⼀、Ant Design Vue
在⼤量数据需要展⽰时，我们⼀般都会以报表的形式展现，按照直觉习惯，肯定使⽤table表格来展⽰⾏列数据。因此，我们要使⽤Ant Design Vue组件库中的table组件，来进⾏数据的绑定。
1、官⽹地址
2、怎么使⽤
我们先对电⼦书管理页⾯改造，将布局进⾏调整，
⽰例代码如下：
<template>
<a-layout class="layout">
<a-layout-content
:>
<div class="about">
<h1>电⼦书管理页⾯</h1>
</div>
</a-layout-content>
</a-layout>
</template>
效果如下：
3、将电⼦书表格进⾏展⽰
要做的事：
表格渲染
slots: ⾃定义渲染
title: 表头渲染
customRender: 值渲染
⽰例代码如下：
<template>
<a-layout class="layout">
<a-layout-content
:>
<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  }">
vue中reactive
<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(() => {
<("/ebook/list?name=").then(response => {
const data = response.data;
ebooks.value = t;
ebooks1.books = t;
})
})
return {
pagination,
loading,
columns,
ebooks1: ebooks,
ebooks2: toRef(ebooks1, "books")
}
},
components: {
SmileOutlined,
DownOutlined,
},
});
</script>
<style scoped>
img {
width: 50px;
height: 50px;
}
</style>
实际效果：
⼆、总结
对于table组件的使⽤不是很熟的话，需要不断去尝试，简单说，就是对象属性的映射。
总体感觉下来，还是进⾏数据绑定后，在进⾏页⾯展⽰，如不是很清晰，请参考这篇《》⽂章。
到此这篇关于Vue3 table表格组件的使⽤的⽂章就介绍到这了，更多相关Vue3 table表格组件内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。