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

如下所示：

代码如下：

 

 
{{ item.key }}
 
{{ item.value }}
 

绑定的是 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表头垂直表格(新增封装一个垂直表格的组件)

对话框中弹出查看信息,打开时表格,要求是表头在左侧

 

   

   

    

    
日报类型
    
{{editForm.daily_type | filterType}}
    
    

    
开始时间
    
{{editForm.start_time | formatTimer('hours')}}
    
    

    
结束时间
    
{{editForm.end_time | formatTimer('hours') }}
    
    

    
今日内容
    
{{editForm.content}}
    
    

    
计划
    
{{editForm.plan}}
    
   
   

效果

------------------手动的华丽丽的的分割线------------------

最近封装了一个带插槽的垂直表头的table组件

效果如图

封装的部分全部代码

.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; //超出文本行自动换行
 }
 }
}

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

然后使用

 
 // 这部分使我们自己要用的预览文件的部分,不用的话可以不用写
   
   

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