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

如下所示：

代码如下：

<table style="width: 100％" 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 class="tableInfo" :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 class="list" v-for="item in detailData" :key="item.value">
 <div class="label">
 <el-badge
  :value="1"
  class="item"
  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="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
  }
  ]

大致如上。

来源：https://blog.csdn.net/z_xuewen/article/details/105054805