detail.md 1.49 KB

Detail 详情

将Form组件的值展示位详情

e7fd7c58c6407927a499a9f018da0ccce0280267/examples/views/docs/detail.md#">基础用法

配置项list将无视配置的type,统一渲染为label

:::snippet 使用list属性设置数据源,列表项中的type指定组件类型,每一项都已设置为el-form-item的子组件

<template>
  <eagle-detail v-model="detailModel" :list="detailList" style="width: 800px;"></eagle-detail>
</template>

<script>
export default {
  data() {
    return {
      detailList: [
        { type: 'el-input', key: 'name', label: '名称' },
        { type: 'eagle-select', key: 'address', label: '住址', group: '地址信息' },
        { type: 'el-input', key: 'postcode', label: '邮编', group: '地址信息' },
        { type: 'el-input', key: 'number', label: '楼栋号', group: '地址信息' },
      ],
      detailModel: {
        name: '老A',
        address: 'Any where',
        postcode: 123456,
        number: 'N栋N-N'
      }
    }
  },
}
</script>

:::

使用list属性设置数据源

export default {
    data() {
        const d = '!&(*&(*';
        console.log('123');
        return {
            a: 123,
            b: '456',
            c: d,
        }
    }
}

1231

Attribute 属性

参数|说明|类型|可选值|默认值 -|-|-|-|- value / v-model | 绑定值 | Object | - | - list | 表单项配置列表 | Array | - | []

List 表单项配置列表

参数|说明|类型|可选值|默认值 -|-|-|-|- key | 参数名 | String | - | - label | 参数标签 | String | - | -