form-item.md
1.86 KB
Form Item 表单项
使用Element UI的项目通常会出现大量的el-col和el-form-item配合使用而导致代码臃肿，因此本组件将二者合并为一个组件，可与原组件兼容。
注意：非
eagle-form组件下使用时，需要在外层加上el-row
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/form-item.md#">基础用法
::: snippet 用法与ElementUI相同
<template>
<el-form :model="model" :rules="rules" label-width="80px" size="small">
<el-row>
<!-- 新组件示例 -->
<eagle-form-item :span="12" label="姓名" prop="name">
<el-input v-model="model.name"></el-input>
</eagle-form-item>
<eagle-form-item :span="12" label="年龄" prop="age">
<el-input v-model="model.age"></el-input>
</eagle-form-item>
<!-- 原组件示例 -->
<el-col :span="12">
<el-form-item label="性别" prop="gender">
<el-input v-model="model.gender"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
model: { name: '', age: '', gender: '' },
rules: {
name: [{ required: true, message: '请输入姓名' }, { pattern: /^\d{16,19}$/, message: '请输入正确的银行卡号' },]
}
}
}
}
</script>
:::
6a3e9fa03a9e62888fd3096196dcc68e3e3bb90a/examples/views/docs/component/form-item.md#">详情渲染
::: snippet 可在el-form组件下，直接使用value属性用于数值的渲染
<template>
<el-form label-width="80px" size="small">
<el-row>
<eagle-form-item span="6" label="姓名" :value="model.name"></eagle-form-item>
<eagle-form-item span="6" label="年龄" :value="model.age"></eagle-form-item>
<eagle-form-item span="6" label="性别" :value="model.gender"></eagle-form-item>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
model: { name: '张三', age: '31', gender: '男' },
}
}
}
</script>
:::