zhgdyun/src/views/projectAdmin/jlw/components/Table.vue

<template>
  <div class="h-table">
    <div class="thead">
      <div class="row">
        <div class="td" v-for="th in thead" :key="th">{{ th }}</div>
      </div>
    </div>
    <div class="tbody">
      <vue-scroll>
        <div class="row" v-for="(item, i) in list" :key="i">
          <div class="td">{{ item.changeTime }}</div>
          <div class="td">{{ item.changeType }}</div>
          <div class="td">详情</div>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    thead: {
      type: Array,
      default: () => []
    },
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
.h-table {
  padding: 0 6px;
  height: 100%;
  font-size: 14px;
  color: #fff;
  .thead,
  .tbody {
    &.thead {
      margin-bottom: 5px;
      padding-bottom: 5px;
      color: #6ee4f0;
      border-bottom: 1px solid #fff;
    }
    &.tbody {
      height: calc(100% - 46px);
    }
    .row {
      width: 100%;
      display: flex;
      .td {
        height: 30px;
        line-height: 30px;
        &:nth-child(1) {
          width: 40%;
        }
        &:nth-child(2) {
          flex: 1;
        }
        &:nth-child(3) {
          margin-right: 10px;
          color: #6ee4f0;
          cursor: pointer;
        }
      }
    }
  }
}
</style>