详情内容渲染组件 - IkBasicsDetails

用于详情内容渲染，支持自定义渲染内容。

props

props	类型	说明	默认值
Details	Object	详细信息的数据展示项、数据和属性的集合	{}
Details.des	Object	el-descriptions 标签原有的所有属性值	{}
Details.list	Array	详情显示数据的字段配置值	[]
Details.list.label	Array	字段配置值的标签文本	[]
Details.list.key	Array	渲染时根据 key 值在 data 中查找数据进行回显的字段配置值的键	[]
Details.list.span	Array	列的数量的字段配置值	[]
Details.list.slotName	Array	处理特殊情况时使用的字段配置值插槽名称	[]
Details.extraSlot	String	标题右侧的插槽	''
Details.data	Object	列表对应的数据	{}

示例代码

<script lang="ts" setup>
const details = {
  des: {
    title: '详情展示',
    column: '4'
  },
  list: [
    { label: '姓名', key: 'name' },
    { label: '年龄', key: 'age' },
    { label: '性别', key: 'sex' },
    { label: '地址', key: 'address' },
    { label: '日期', key: 'date' },
    { label: '时间', key: 'time' },
    { label: '数字', key: 'number' },
    { label: '状态', key: 'status', slotName: 'status' },
    { label: '开关', key: 'switch', slotName: 'switch' },
    { label: '多选', key: 'checkbox', slotName: 'checkbox' },
    { label: '评分', key: 'rate', slotName: 'rate' }
  ],
  data: {
    name: '张三',
    age: 18,
    sex: '男',
    address: '北京市朝阳区',
    date: '2022-01-01',
    time: '12:00:00',
    number: 100,
    status: true,
    switch: true,
    checkbox: ['选项1', '选项2'],
    rate: 90
  },
  extraSlot: 'extra'
}
</script>

<template>
  <IkPageMain fixed style="padding: 16px; box-sizing: border-box">
    <IkBasicsDetails style="width: 750px" :details="details">
      <template #extra>
        <el-button type="primary">操作按钮1</el-button>
        <el-button type="primary">操作按钮2</el-button>
      </template>
      <template #status>
        {{ details.data.status ? '启用' : '禁用' }}
      </template>
      <template #switch>
        {{ details.data.switch ? '开启' : '关闭' }}
      </template>
      <template #checkbox>
        {{ details.data.checkbox.toString() }}
      </template>
      <template #rate>
        {{ details.data.rate }} 分
      </template>
    </IkBasicsDetails>
  </IkPageMain>
</template>