Vue结合原生Table表头纵向排列

1.html代码

 <div
            style="padding: 10px"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <table class="table table-bordered" cellspacing="1">
              <thead>
                <tr>
                  <td style="color: #990000; font-weight: 800; font-size: 14px">
                    字段名称
                  </td>
                  <td
                    style="color: #333333; font-weight: 800; font-size: 14px"
                    v-for="(cont, index) in item"
                    :key="index"
                    class="ellipsisCss"
                    :title="cont.lineName"
                  >
                    {{ cont.lineName }}
                  </td>
                </tr>
              </thead>
              <thead>
                <tr>
                  <td style="color: #990000; font-weight: 800; font-size: 14px">
                    字段定义
                  </td>
                  <td
                    class="ellipsisCss11"
                    v-for="(it, index) in item"
                    :key="index"
                    :title="it.lineDefinition"
                  >
                    {{ it.lineDefinition }}
                  </td>
                </tr>
              </thead>
              <thead>
                <tr>
                  <td style="color: #990000; font-weight: 800; font-size: 14px">
                    格式
                  </td>
                  <td v-for="(sd, index) in item" :key="index">
                    {{ sd.lineFormat }}
                  </td>
                </tr>
              </thead>
            </table>
          </div>

2.需求是一排12个 多余得往下拍

 this.tableData = res.data.map((item) => ({
              lineDefinition: item.lineDefinition,
              lineName: item.lineName,
              lineFormat: item.lineFormat,
            }));
            let arr = [...this.tableData];
            // 包含100个对象的数组
            let newArr = [];
            // 存放新数组的数组
            for (let i = 0; i < arr.length; i += 12) {
              // 如果i+8小于数组长度，执行以下代码
              let subArr = arr.slice(i, i + 12);
              let subLength = subArr.length;
              let sl = 12 - subLength;
              if (sl < 12) {
                for (let a = 0; a < sl; a++) {
                  subArr.push({
                    lineDefinition: "",
                    lineName: "",
                    lineFormat: "",
                  });
                }
              }
              newArr.push(subArr);
            }

            this.tableData = newArr;
})

3.样式(表头 内容多的省略号...,鼠标放上去显示全部)

table tr {
  width: 140px;
  // line-height: 200%;
}
table,
tr,
td {
  height: 40px;
  text-align: center;
  // width: 160px;
  border: 1px solid #ccc; /* 设置边框样式 */
}
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 设置表格宽度 */
  table-layout: fixed;
}
.ellipsisCss {
  // height: 150px;
  max-width: 160px; /* 设置单元格最大宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #ccc; /* 设置边框样式 */
  padding: 10px;
}
.ellipsisCss11 {
  // height: 150px;
  width: 130px; /* 设置单元格最大宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #ccc; /* 设置边框样式 */
  padding: 10px;
}

4.最后的效果（字段名称 字段定义省略号展示 鼠标放上去显示）