boss/uni/components/table.vue

<template>
  <view class="table">
    <view class="tr">
      <view class="td" v-for="(label, index) of labels" :key="index">
        <text>{{label}}</text>
      </view>
    </view>
    <view class="tbody">
      <view class="tr" v-for="(item, index) of data" :key="index">
        <view class="td" v-for="(key, keyIndex) of keys" :key="keyIndex">
          <text>{{item[key]}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
    keys: {
      type: Array,
      required: true,
    },
    labels: {
      type: Array,
      required: true,
    },
  },
}
</script>

<style lang="less" scoped>
@borderLine: 1px solid #d8d8d8;
.table {
  line-height: 32px;
  text-align: center;
  border-left: @borderLine;
  border-top: @borderLine;
  .tbody {
    height: calc(100% - 34px);;
    overflow-y: scroll;
    width: max-content;
  }
  .tr {
    display: flex;
    border-bottom: @borderLine;
    .td {
      width: 100px;
      display: flex;
      flex: none;
      justify-content: center;
      align-items: center;
      border-right: @borderLine;
      word-break: break-all;
    }
  }
}
</style>