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
            }
          ]

大致如上