Vue+Element自定义纵向表格表头教程

如下所示：

代码如下：

<table class='myTable'> <tr v-for='(item,i) in statDatas' :key='i'> <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 :model='editForm' 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组件

效果如图

封装的部分全部代码

<template> <div class='table_detail'> <div v-for='item in detailData' :key='item.value'> <div class='label'> <el-badge :value='1' type='primary' v-if='item.label === ’扣分项’ || item.label === ’加分项’' //这里是动态传表头进去 /> {{ item.label }} </div> <div class='text'> <template v-if='$scopedSlots[item.prop]'> <slot :name='item.prop' :files='item.text'></slot> </template> <template v-else>{{ item.text }}</template> </div> </div> </div></template><script>export default { name: 'table-detail', props: { detailData: { type: Array, default: () => [] } }, data() { return { visible: false } }}</script><style lang='scss'>.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; //超出文本行自动换行 } }}</style>

然后使用部分,先局内引入注册

然后使用

<table-detail :detailData='companyDetail'> // 这部分使我们自己要用的预览文件的部分,不用的话可以不用写 <template v-slot:file='{ files }'> <app-upload :upload='new Upload(upload)' is-download is-preview is-view disabled /> <ul> <li v-for='(file, i) in files' :key='i'> {{ file.url }} <el-link type='primary' :href='https://www.haobala.com/bcjs/file ? file.url : ’’' target='_blank' >预览</el-link > <el-link type='primary' @click='download(file)'>下载</el-link> </li> </ul> </template> </table-detail>

在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自定义纵向表格表头教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。