assessment-front/pages/report/reportTableView.vue

<template>
  <view class="table">
    <view class="table-header">
      <view class="table-cell table-th">风险</view>
      <view class="table-cell table-th">风险原因</view>
      <view class="table-cell table-th">风险等级</view>
      <view class="table-cell table-th">可能导致的结果</view>
    </view>
    <view class="table-row" v-for="row in list" :key="row.id">
      <view class="table-cell">{{ row.title }}</view>
      <view class="table-row-cols">
        <template v-for="child in row.children">
          <view class="table-cell" :key="getKey(child.id, 'reason')">{{ child.reason || '' }}</view>
          <view :class="['table-cell', `level-${child.level}`]" :key="getKey(child.id, 'level')">{{ getLevelDesc(child.level) }}</view>
          <view class="table-cell" :key="getKey(child.id, 'result')">{{ child.result || '' }}</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>

  const LEVEL_AND_DESC_MAPPING = {
    '0': '低风险',
    '1': '中风险',
    '2': '高风险',
    '3': '合规',
  }

  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
      }
    },
    methods: {
      getKey(id, key) {
        return `${id}-${key}`
      },
      getLevelDesc(level) {
        return LEVEL_AND_DESC_MAPPING[level]
      },
    },
  }
</script>

<style lang="scss" scoped>
  .table {
    width: 100%;
    // overflow-x: auto;
    // display: grid;
    // // 148.5 184 146 244.5
    // grid-template-columns: 148rpx 184rpx 146rpx auto;
    border: 1rpx solid #DADADA;

    &-header {
      display: grid;
      grid-template-columns: 148rpx 184rpx 146rpx auto;

      .table-th {
        &:nth-child(4n) {
          border-right: none;
        }
      }
    }

    &-row {
      display: grid;
      // 148.5 184 146 244.5
      // grid-template-columns: 148rpx 184rpx 146rpx auto;
      grid-template-columns: 148rpx auto;

      &-cols {
        min-width: 0;
        display: grid;
        grid-template-columns: 184rpx 146rpx auto;

        .table-cell {
          &:nth-child(3n) {
            border-right: none;
          }
        }
      }
      
      &:last-child {
        & > .table-cell {
          border-bottom: none;
        }

        & > .table-row-cols {
          .table-cell:nth-last-child(-n+3) {
            border-bottom: none;
          }
        }
      }
    }

    &-cell {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 13rpx;
      box-sizing: border-box;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.5;
      color: #080808;
      background: #FFFEEE;
      border-right: 2rpx solid #DADADA;
      border-bottom: 2rpx solid #DADADA;


      // &:nth-last-child(-n+5) {
      //   border-bottom: none;
      // }
      
    }

    &-th {
      white-space: nowrap;
      padding: 20rpx;
      font-size: 26rpx;
      color: #014FA2;
      background: rgba($color: #014FA2, $alpha: 0.11);
    }
  }

  .level {
    &-0 {
      color: #014FA2;
    }
    &-1 {
      color: #FFA800;
    }
    &-2 {
      color: #FF0000;
    }
    &-3 {
      color: #5AC725;
    }
  }
</style>