vue-elementplus-admin/src/views/Manage/Product/components/Detail.vue

<script setup lang="tsx">
import { PropType, reactive } from 'vue'
import type { ProductTableData } from '@/api/manage/types'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'

defineProps({
  currentRow: {
    type: Object as PropType<Nullable<ProductTableData>>,
    default: () => null
  }
})

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'productName',
    label: '产品名称',
    span: 24
  },
  {
    field: 'productIntroduction',
    label: '产品简介',

    span: 24
  },
  {
    field: 'productPrice',
    label: '产品价格'
  },
  {
    field: 'productStock',
    label: '库存'
  },
  {
    field: 'productSpecifications',
    label: '产品规格'
  },
  {
    field: 'productCharacteristic',
    label: '产品特点'
  },
  {
    field: 'productPic',
    label: '产品图片',
    slots: {
      default: (data: any) => {
        return <img style="width:100%" src={data.productPic}></img>
      }
    }
  },
  {
    field: 'remark',
    label: '备注',
    span: 24
  },

  {
    field: 'productDetailed',
    label: '产品详情',
    span: 24,
    slots: {
      default: (data: any) => {
        return <div innerHTML={data.productDetailed}></div>
      }
    }
  }
])
</script>

<template>
  <Descriptions :schema="schema" :data="currentRow || {}" />
</template>