这篇文章主要介绍了Vue+Element自定义纵向表格表头教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
代码如下：
<table style="width: 100%" class="myTable"> <tr> <td class="column">{{ item.key }}</td><td class="column">{{ item.value }}</td></tr></table>
绑定的是 statDatas 属性是一个 json数组，由key value组成的json，如果需要多列就直接增加属性就可以。
优美样式：
.myTable { border-collapse: collapse; margin: 0 auto; text-align: center; } .myTable td, .myTable th { border: 1px solid #cad9ea; color: #666; height: 60px; }
补充知识：vue element table表头垂直表格(新增封装一个垂直表格的组件)
对话框中弹出查看信息,打开时表格,要求是表头在左侧
<table class="tableInfo" id="printTest"> <thead></thead><tbody> <tr> <td>日报类型</td><td>{{editForm.daily_type | filterType}}</td></tr><tr> <td>开始时间</td><td>{{editForm.start_time | formatTimer('hours')}}</td></tr><tr> <td>结束时间</td><td>{{editForm.end_time | formatTimer('hours') }}</td></tr><tr> <td>今日内容</td><td>{{editForm.content}}</td></tr><tr> <td>计划</td><td>{{editForm.plan}}</td></tr></tbody></table>
效果
——————手动的华丽丽的的分割线——————
最近封装了一个带插槽的垂直表头的table组件
效果如图
封装的部分全部代码
<div class="table_detail"> <div class="list"> <div class="label"> {{ item.label }} </div><div class="text"> {{ item.text }}</div></div></div> .table_detail { width: auto; height: auto; margin: 0 10px 0 10px; border: 1px solid #ebeef5; border-bottom: none; .list { display: flex; justify-content: space-between; border-bottom: 1px solid #ebeef5; // font-size: 16px; .label { width: 95px; border-right: 1px solid #ebeef5; padding: 10px 10px 10px 0; text-align: right; font-weight: 400; } .text { flex: 1; text-align: left; padding: 10px 30px 10px 10px; font-weight: 500; word-wrap: break-word; //超出文本行自动换行 word-break: break-all; //超出文本行自动换行 overflow: hidden; //超出文本行自动换行 } } }
然后使用部分,先局内引入注册
然后使用
// 这部分使我们自己要用的预览文件的部分,不用的话可以不用写 <ul> <li> {{ <p>本文来源gao!daima.com搞$代!码#网#</p>file.url }} 预览下载</li></ul>
在data 里面定义 companyDetail: [],
然后在methods里面获取到数据之后赋值即可
this.companyDetail = [ { label: `${this.labelTitle}项`, text: res.indexTitle }, { label: `${this.labelTitle}值`, text: res.score }, { label: `${this.labelTitle}时间`, text: this.$formatDate(res.reportTime, "YYYY.MM.DD", "YYYYMMDD") }, { label: `${this.labelTitle}单位`, text: res.orgName }, { label: `${this.labelTitle}原因`, text: res.description }, { label: "申诉理由", text: res.reason }, { label: "附件", prop: "file", text: files } ]
大致如上。
以上这篇Vue+Element自定义纵向表格表头教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是Vue+Element自定义纵向表格表头教程的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue+Element自定义纵向表格表头教程
转载请注明原文链接：Vue+Element自定义纵向表格表头教程
