vue中table表格,vuetable组件在哪里
这篇文章主要介绍了Vue3表表格组件的使用，文章围绕桌子表格组件是如何使用的相关资料展开详细内容，需要的朋友可以参考一下
目录
一、蚂蚁设计Vue1、官网地址2、怎么使用3、将电子书表格进行展示二、总结
一、Ant Design Vue
在大量数据需要展示时，我们一般都会以报表的形式展现，按照直觉习惯，肯定使用桌子表格来展示行列数据。
因此，我们要使用蚂蚁设计公司组件库中的桌子组件，来进行数据的绑定。
1、官网地址
官网地址：https://2 x . antdv。com/components/table-cn # API
2、怎么使用
我们先对电子书管理页面改造，将布局进行调整，
示例代码如下：
模板
布局类=布局
布局内容
:style={ background: #fff ，padding: 24px ，minHeight: 280px }
div class="关于"
氕电子书管理页面/h1
/div
/a-布局-内容
/a-布局
/模板
效果如下：
3、将电子书表格进行展示
要做的事：
表格渲染
插槽：自定义渲染
标题：表头渲染
自定义渲染：值渲染
示例代码如下：
模板
布局类=布局
布局内容
:style={ background: #fff ，padding: 24px ，minHeight: 280px }
a-table :columns=columns
:data-source=ebooks1
:pagination=pagination
:loading=loading
模板#cover={ text: cover }
img v-if= cover :src= cover alt= avatar /
/模板
template #name={ text: name }
a{{ text }}/a
/模板
模板#自定义标题
跨度
微笑轮廓/
名字
/span
/模板
模板# action="{ record } "
跨度
空间大小=小
a-button type=primary @click=编辑（记录)
编辑
/a按钮
按钮类型=危险
删除
/a按钮
/a空格
/span
/模板
/a-表格
/a-布局-内容
/a-布局
/模板
脚本语言
从" @ant-design/icons-vue "导入{微笑外轮廓，下轮廓}。
从“vue”导入{defineComponent，onMounted，reactive，ref，toRef }。
从" axios "导入axios
导出默认定义组件({
名称：管理员手册，
setup() {
常量分页={
onChange: (page: number)={
console.log(第页);
},
页面大小：3,
};
const loading=ref(false)；
常量列=[
{
标题： 封面，
数据索引："封面",
插槽：{customRender: cover}
},
{
标题： 名称，
数据索引："名称"
},
{
标题： 分类一，
数据索引："类别1Id”，
关键字："类别1Id”，
},
{
标题： 分类二，
数据索引："类别2Id”，
关键字："类别2Id”，
},
{
标题： 文档数，
数据索引："文档计数"
},
{
标题： 阅读数，
数据索引："视图计数"
},
{
标题： 点赞数，
数据索引：“投票计数”
},
{
标题："动作",
按键："动作",
插槽：{customRender: action}
}
];
//使用裁判员进行数据绑定
const ebooks=ref()；
//使用反应的进行数据绑定
const ebooks 1=reactive({ books:[]})
onMounted(()={
axios.get(/ebook/list？name=).然后(响应={
常量数据=response.data
电子书。值=数据。内容；
电子书1。书籍=数据。内容；
})
})
返回{
分页，
正在加载，
列，
电子书1:电子书，
电子书2: toRef(电子书1,"书籍")
}
},
组件：{
微笑着，
轮廓分明，
},
});
/脚本
样式范围
img {
宽度：50px
高度：50px
}
/风格
实际效果：
二、总结
如果不熟悉表格组件的使用，需要不断尝试。简单来说就是对象属性的映射。
一般来说，数据绑定后，显示页面。如果不清楚，请参考这篇《Vue3 列表界面数据展示详情》的文章。
关于Vue3 table表格组件的使用，本文到此结束。有关Vue3表格组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。