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

手写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']}]