hb_sis_zhfx/src/components/coms/table/table-span.vue

<template>
  <table class="com-table">
    <thead>
      <tr>
        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{ col.unit }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) of data.data" :key="index">
        <td :rowspan="rowspan(row, col)" :colspan="colspan(row, col)" v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num, remove: row[col.field] == '' }">
          {{ row[col.field] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  // 名称
  name: "ComTable",
  // 使用组件
  components: {},
  // 传入参数
  props: {
    data: Object,
  },
  // 自定义事件
  emits: {},
  // 数据
  data() {
    return {};
  },
  computed: {},
  // 函数
  methods: {
    rowspan: function(row, col) {
      if (row.row_span.length == 0) {
        return 1;
      } else {
        let row_span = row.row_span.find((t) => t[0] == col.field);
        if (row_span) {
          return row_span[1];
        } else {
          return 1;
        }
      }
    },
    colspan: function(row, col) {
      if (row.col_span.length == 0) {
        return 1;
      } else {
        let col_span = row.col_span.find((t) => t[0] == col.field);
        if (col_span) {
          return col_span[1];
        } else {
          return 1;
        }
      }
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less">
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;

.com-table {
  width: 100%;
  border-collapse: collapse;

  thead {
    tr {
      th {
        background-color: fade(@darkBack, 60%);
        padding: 0.741vh 0;
        color: @titleGray;
        font-weight: 400;
        font-size: @fontsize-s;
        position: sticky;
        top: 0;

        &.light {
          color: @green;
        }
      }
    }
  }

  tbody {
    tr {
      &:nth-child(2n) {
        background-color: fade(@rowGray, 20%);
      }

      td {
        padding: 0.556vh 0;
        color: @rowGray;
        text-align: center;
        font-size: @fontsize-s;

        &.light {
          color: @green;
        }

        &.num {
          font-family: "Bicubik";
          font-weight: 400;
        }

        &.remove {
          display: none;
        }
      }
    }
  }
}
</style>