vue 3.2 setup 详情table基础版 动态设置 x 列展示支持slot

<template>
  <div class="detail-table">
    <div
      v-for="(row, key, index) in config"
      :key="key"
      class="detail-item"
      :style="{ width: `${cellWidth}` }"
      :class="[
        'detail-item',
        {
          'border-top': index < columnsPerRow
        }
      ]"
    >
      <div class="detail-label">{{ row }}</div>
      <div class="detail-value">
        <slot :name="key" :row="data">
          {{ data[key] || '' }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup name="DetailTable">
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {}
  },
  config: {
    type: Object,
    default: () => {}
  },
  columnsPerRow: {
    type: Number,
    required: false,
    default: 3
  }
})
const cellWidth = computed(() => {
  return `${(100 / props.columnsPerRow).toFixed(1)}%`
})
</script>

<style lang="scss" scoped>
.detail-table {
  display: flex;
  flex-direction: row;
  border-left: 1px solid #d9d9d9;
  flex-wrap: wrap;

  .detail-item {
    min-height: 38px;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
  }

  .detail-label {
    width: 130px;
    padding: 0 10px;
    text-align: center;
    font-weight: bold;
    border-right: 1px solid #d9d9d9;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .detail-value {
    display: flex;
    align-items: center;
    flex: 1;
    border-right: 1px solid #d9d9d9;
    background: #fff;
    margin-left: 10px;
    word-wrap: break-word;
    word-break: break-all;
  }
}

.border-top {
  border-top: 1px solid #d9d9d9;
}
</style>

html

 <detail-table :config="basic" :data="info" :columnsPerRow="3">
   <template #status="{ row }">
       {{ $formatDict(row.status, transfer_out_order_status) }}
     </template>
 </detail-table>
 
 script
 
 const basic = {
  code: '调拨出库单号',
  type: '调拨类型',
  status: '状态',
  outOcName: '运营中心',
  outDcName: '调出分发中心',
  enterDcName: '调入分发中心',
  deliveryAddress: '提货地址',
  deliveryContactor: '提货联系人'
  }
 function getDetail() {
  spinning.value = true
  getTransferOutOrder(selectedRow.value.id)
    .then(({ data }) => {
      info.value = data
    })
    .finally(() => {
      spinning.value = false
    })
}
getDetail()