TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue组件封装,简单的表格组件封装。组件插槽简单使用。Table 组件封装
1773
人阅读
2020/9/19 15:19
总访问:
3997156
评论:
0
收藏:
0
手机
分类:
前端
看到设计图上有一个类似的表格需要重复使用,就封装一个简单的表格组件,方便重复使用,很简单就是做数据展示,不进行编辑这。数据通过外面传递过去,然后里边循环生成行和列就行,然后加点样式,就是因为类似的样式要重复使用。 效果如下: ![](https://img.tnblog.net/arcimg/aojiancc2/d90de9f195164a07abd0b74096f51c34.png) ### 封装组件 代码很简单,表头想着通用一点就做了一个插槽,让外面传递过来,当然也可以做成传递数据在组件里边生成。然后行列的数据就是传递一串json,过来做一个双循环解析一下数据即可。 行的显示风格做成了组件的参数,居中或者左对齐等,可以根据需要多写几套样式,通过参数传递过来决定显示方式。表头的显示方式也写了两个样式,居中或者左对齐。代码如下,很简单。 ``` <template> <div > <table class="zuxia_table"> <!-- <tr class="zuxia_table_header"> <th>姓名</th> <th>班级</th> <th>事件</th> <th>时间</th> </tr> --> <!-- 表头也可以做成插槽,方便表头在引用组件的时候自定义 --> <slot name="zuxia_table_header"></slot> <!-- 根据传递过来的json直接循环获取数据显示 --> <tr v-for="(item, index) in rowdata" :key="index" class="content_tr" :class="row_style"> <td v-for="(tditem,zindex) in item" :key="zindex">{{tditem}}</td> </tr> </table> </div> </template> <script> export default { // 组件名字 name: 'ZuxiaTable', // 组件参数 props: { percentage: { type: Number, default: 0 }, title: { type: String, default: '默认标题' }, // 行的显示风格,居中或者左对齐等,可以根据需要多写几套样式 row_style: { type: String, default: 'content_tr_center' }, rowdata: { type: Array, default: () => { return [] }, // required: true } }, data() { return { // tr_type:"content_tr_center" } }, components: { }, mounted() { }, beforeDestroy () { }, methods: { } } </script> <style lang="scss" scoped> .zuxia_table{ margin-top: 20px; width: 100%; border-collapse: collapse; .zuxia_table_header{ background-color: rgba(13, 81, 137, 0.5); // opacity: 0.5; th{ height: 13px; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #23FFFC; line-height: 33px; padding-left: 10px; } } // 提供一个左对齐的样式,引用组件的时候可以直接用 .zuxia_table_header_left { text-align: left; } .content_tr{ height: 41px; // background: #082044; background-color: rgba(8, 32, 68, 0.4); td{ font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 33px; // padding-left: 10px; } } //----------- start 行风格-左对齐 -------------- .content_tr_left{ td{ padding-left: 10px; } } .content_tr_left>td:first-child{ padding-left: 15px; } //----------- end 行风格-左对齐 -------------- //----------- start 行风格-居中 -------------- .content_tr_center{ td{ text-align: center; } } .content_tr_center>td:first-child{ padding-left: 15px; // text-align: left; } //----------- end 行风格-居中 -------------- } </style> ``` ### 使用组件 先引用一下组件,以及提供一下测试的json数据 ``` import ZuxiaGrid from '@/views/component/zuxia_grid.vue' import ZuxiaTable from '@/views/component/zuxia_table.vue' export default { components: { ZuxiaGrid, ZuxiaTable }, data() { return { rowdata:[ { name:"2022级计算机1班", class:"yy1", content:"xx", datetiem:'8-12 09:33:52', pro:"40%", zh:"50%", sort:"1" }, { name:"2022级计算机1班", class:"yy2", content:"xx", datetiem:'8-15 09:33:52', pro:"40%", zh:"50%", sort:"3" }, { name:"2022级计算机1班", class:"yy3", content:"xx", datetiem:'8-13 09:33:52', pro:"40%", zh:"50%", sort:"2" }, { name:"2022级计算机1班", class:"yy2", content:"xx", datetiem:'8-15 09:33:52', pro:"40%", zh:"50%", sort:"3" }, { name:"2022级计算机1班", class:"yy2", content:"xx", datetiem:'8-15 09:33:52', pro:"40%", zh:"60%", sort:"6" }, ], newrowdata:[ { name:"张三丰", class:"2022级计算机1班", content:"通过什么什么什么什么什么评估", datetiem:'8-15 09:33:52', }, { name:"张三丰", class:"2022级计算机1班", content:"通过什么什么什么什么什么评估", datetiem:'8-15 09:33:52', }, { name:"张三丰", class:"2022级计算机1班", content:"通过什么什么什么什么什么评估", datetiem:'8-15 09:33:52', }, { name:"张三丰", class:"2022级计算机1班", content:"通过什么什么什么什么什么评估", datetiem:'8-15 09:33:52', }, { name:"张三丰", class:"2022级计算机1班", content:"通过什么什么什么什么什么评估", datetiem:'8-15 09:33:52', } ] }, ``` 使用组件 ``` <div class="bc_left_com"> <ZuxiaGrid style="height:100%"> <template #content> <ZuxiaTable row_style="content_tr_left" :rowdata="rowdata"> <template #zuxia_table_header> <tr class="zuxia_table_header zuxia_table_header_left"> <th>班级名称</th> <th>班主任</th> <th>评估</th> <th>实验</th> <th>项目</th> <th>综合</th> <th>排名</th> </tr> </template> </ZuxiaTable> </template> </ZuxiaGrid> </div> <div class="bc_middle_com"> <ZuxiaGrid title="最新使用记录" style="height:100%"> <template #content> <ZuxiaTable row_style="content_tr_center" :rowdata="newrowdata"> <template #zuxia_table_header> <tr class="zuxia_table_header"> <th>姓名</th> <th>班级</th> <th>事件</th> <th>时间</th> </tr> </template> </ZuxiaTable> </template> </ZuxiaGrid> </div> ``` 效果如下:左边的表格表头与数据都是左对齐的,右边的表格表头与数据是居中的,如果需要其他风格的可以多提供几套样式,通过参数传递进去就行了。表头是通过插槽放进去的,不同的风格可以在外面写更简单 ![](https://img.tnblog.net/arcimg/aojiancc2/d90de9f195164a07abd0b74096f51c34.png) 外面那块高亮格子的组件封装可以参考:https://www.tnblog.net/aojiancc2/article/details/7826
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}