ant-design-vue 3.x vue 3.x 详情组件

<template>
  <a-row class="detail-table">
    <a-col
      v-for="(row, key) in config"
      class="detail-item"
      :span="cellWidth(key)"
      :key="key"
    >
      <div class="detail-label">{{ row }}</div>
      <div class="detail-value">
        <slot :name="key" :row="data">
          {{ data[key] || '' }}
        </slot>
      </div>
    </a-col>
  </a-row>
</template>

<script setup name="DetailTable">
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {}
  },
  config: {
    type: Object,
    required: true,
    default: () => {}
  },
  columnsPerRow: {
    // 与ant-design-vue  col 配置一致
    type: Number,
    required: false,
    default: 8
  },
  colums: {
    type: Object,
    required: false,
    default: () => {}
  }
})
function cellWidth(key) {
  const { columnsPerRow, colums } = props
  let flexBasis = columnsPerRow
  if (!isEmptyObject(colums)) {
    if (Object.keys(colums).includes(key)) {
      flexBasis = colums[key]
    }
  }
  return flexBasis
}
function isEmptyObject(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false
    }
  }
  return true
}
</script>

<style lang="scss" scoped>
.detail-table {
  border: 1px solid #d9d9d9;
  border-bottom: none;
  border-right: none;
}
.detail-item {
  min-height: 38px;
  border-bottom: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  display: flex;
  .detail-label {
    font-weight: bold;
    border-right: 1px solid #d9d9d9;
    display: flex;
    width: 130px;
    padding: 0 10px;
    text-align: center;
    background: #f3f3f3;
    align-items: center;
    justify-content: center;
  }

  .detail-value {
    display: flex;
    align-items: center;
    flex: 1;
    background: #fff;
    word-wrap: break-word;
    word-break: break-all;
    padding-left: 10px;
  }
}
</style>

 <detail-table
  :config="basic"
    :data="info"
    :colums="{
      remark: 24
    }">
</detail-table>
const basic = {
  code: '编码',
  remark: '备注'
}
info = { remark: '这是备注',code: 111}
:colums="{  remark: 24 }"  代表 remark 独占一行