手写table表格（一表头多数据）

<template>
  <div class="table-info">

    <div class="info-list">

      <div class="header-wrapper">

        <div class="columns-title" v-for="(i, k) in columns" :key="k" :style="'width:' + i.width + 'px'">

          <div :class="[i.child ? 'active' : '']" v-html="i.name"></div>

          <!-- <div v-if="i.child" class="line"></div> -->

          <div v-if="i.child" class="column-warpper">

            <div class="column-subtitle" v-for="(child, cindex) in i.child" :key="cindex"
              :style="'width:' + child.width + 'px'" v-html="child.name"></div>

          </div>

        </div>

      </div>

      <div class="content-data" v-for="(item, index) in dataList" :key="index">

        <div class="columns-text" v-for="(data, dindex) in item.data" :key="dindex"
          :style="'width:' + dataWidth[dindex] + 'px'" v-html="data">
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'table-info',
  props: {
    columns: {
      type: Array,
      default: []
    },
    dataWidth: {
      type: Array,
      default() {
        return []
      }
    },
    dataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style scoped>
.table-info {
  width: 100%;
  /* width: 1600px; */
}

.info-list {
  display: inline-block;
  margin-bottom: 20px;
}

.header-wrapper {
  height: 70px;
  line-height: 70px;
  background: #4b82e9;
  font-size: 16px;
  color: #ffffff;
  /* margin-bottom: 10px; */
  text-align: left;
  border: 1px solid black;
  border-right: none;
}

.header-wrapper>.columns-title {
  text-align: center;
  /* margin-right: 4px; */
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  height: 70px;
  border-right: 1px solid black;

}

.header-wrapper>.columns-title>.active {
  line-height: 36px;
  border-bottom: 1px solid black;
}

.line {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.3);
}

.column-warpper {
  position: absolute;
  bottom: 0;
  line-height: 20px;
}

.column-subtitle {
  text-align: center;
  /* margin-right: 4px; */
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 31px;
  border-right: 1px solid black;
  padding-top: 10px;
  position: relative;
  bottom: -3px;

}

/* 数值 */
.content-data {
  width: 100%;
  height: 27px;
  line-height: 27px;
  border: 1px solid black;
  border-top: none;
  border-right: none;
}

.content-data>.columns-text {
  height: 100%;
  border-right: 1px solid black;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

数据格式

columns: [
                  { name: "浓度(μg/mL)", width: "180" },
                  {
                    name: "盐度S",
                    width: "840",
                    child: [
                      { name: '0', width: '120' },
                      { name: '3.5', width: '120' },
                      { name: '7', width: '120' },
                      { name: '14', width: '120' },
                      { name: '21', width: '120' },
                      { name: '28', width: '120' },
                      { name: '35', width: '120' },
                    ]
                  },
                  { name: "最大相对偏差/%", width: "200" },
                ],
                dataWidth: ['180', '120', '120', '120', '120', '120', '120', '120', '200'],
                dataList: [
                  {
                    data: ['0.4', '0.397', '0.417', '0.394', '0.397', '0.41', '0.387', '0.401', '4.2']
                  },
                  {
                    data: ['2.2', '2.24', '2.21', '2.23', '2.25', '2.16', '2.16', '2.13', '3.2']
                  }
                ]