detail.md
1.49 KB
Detail 详情
将Form组件的值展示位详情
5f3c7155eb65dc5ac1b847f781a764b3aca47e49/examples/views/docs/component/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,
}
}
}
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value / v-model | 绑定值 | Object | - | - list | 表单项配置列表 | Array | - | []
List 表单项配置列表
参数|说明|类型|可选值|默认值 -|-|-|-|- key | 参数名 | String | - | - label | 参数标签 | String | - | -