手写table表格（一表头对应一数据）

不想上班只想要钱

已于 2024-02-20 15:18:55 修改

阅读量249

点赞数 3

于 2024-02-20 15:15:14 首次发布

本文链接：https://blog.csdn.net/Aa12364567/article/details/136191022

版权

前端同时被 3 个专栏收录

153 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

Java Web

43 篇文章 2 订阅

订阅专栏

手写table表格（一表头对应一数据）

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

    <div class="data-list">

      <div class="data-title"> {{ title }}</div>

      <div class="content-header" v-if="columns.length != 0">

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

      </div>

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

        <div class="columns-text" :class="[item.color && item.color[dindex] ? 'active' : '']"
          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: 'tablelist',
  props: {
    title: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: []
    },
    dataWidth: {
      type: Array,
      default() {
        return []
      }
    },
    dataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {

    }
  }
}
</script>

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

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

.data-title {
  font-size: 16px;
}

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

.content-header>.columns-content {
  text-align: center;
  /* margin-right: 4px; */
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid black;
}

/* 数值 */
.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;
}

.columns-text.active {
  background-color: red;
}
</style>

数据格式

  columns: [
                  { name: "浓度(μg/mL)", width: "135" },
                  { name: "测定结果(μg·mL<sup>-1</sup>)", width: "1200" },
                  { name: "平均值(μg/mL)", width: "120" },
                  { name: "RSD/%", width: "120" },
                ],
                dataWidth: ['135', '120', '120', '120', '120', '120', '120', '120', '120', '120', '120', '120', '120'],
                dataList: [
                  {
                    data: ['0.4', '0.391', '0.384', '0.387', '0.397', '0.381', '0.404', '0.407', '0.401', '0.394', '0.391', '0.394', '2.2']
                  },
                  {
                    data: ['1.4', '1.42', '1.42', '1.44', '1.43', '1.42', '1.43', '1.45', '1.39', '1.43', '1.42', '1.42', '1.1']
                  }
                ]