form.md
5.95 KB
Form 表单
根据JSON Scheme配置自动生成表单
11a6548375b3ac8f8325326abe99861983ba760d/examples/views/docs/component/form.md#">基础用法
配置list属性设置JSON Scheme配置列表
::: snippet v-model值动态改变，支持初始化
<template>
<div>
<pre class="demo-model">{{ model }}</pre>
<z-form v-model="model" :list="list"></z-form>
</div>
</template>
<script>
export default {
data() {
return {
model: { name: '', age: '' },
list: [
{ type: 'el-input', label: '姓名', key: 'name' },
{ type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
]
}
}
}
</script>
:::
::: snippet span设置行占位
<template>
<z-form v-model="model" :list="list" :span="12"></z-form>
</template>
<script>
export default {
data() {
return {
model: { name: '', age: '' },
list: [
{ type: 'el-input', label: '姓名', key: 'name' },
{ type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
]
}
}
}
</script>
:::
::: snippet label-width设置标题宽度
<template>
<z-form v-model="model" :list="list" label-width="60px"></z-form>
</template>
<script>
export default {
data() {
return {
model: { name: '', age: '' },
list: [
{ type: 'el-input', label: '姓名', key: 'name' },
{ type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
]
}
}
}
</script>
:::
11a6548375b3ac8f8325326abe99861983ba760d/examples/views/docs/component/form.md#">表单校验
配置list的配置项中的rules
::: snippet v-model值动态改变，支持初始化
<template>
<div>
<z-form ref="form" v-model="model" :list="list" :span="12" @validate="onValidate" @reset="onReset"></z-form>
<el-button size="small" type="primary" @click="submit">提交</el-button>
<el-button size="small" plain @click="reset">重置</el-button>
</div>
</template>
<script>
export default {
data() {
return {
model: { name: '', age: '' },
list: [
{ type: 'el-input', label: '姓名', key: 'name', rules: [{ required: true, message: '请输入', trigger: 'change' }] },
{ type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
]
}
},
methods: {
onValidate(valid, model) {
if (valid) {
console.log(model);
}
},
onReset() {
Object.keys(this.model).forEach(key => {
this.model[key] = '';
});
},
submit() {
this.$refs.form.validate();
},
reset() {
this.$refs.form.reset();
}
}
}
</script>
:::
11a6548375b3ac8f8325326abe99861983ba760d/examples/views/docs/component/form.md#">表单分组
将表单内容进行分组显示
::: snippet 表单配置项的group值设置分组
<template>
<div>
<pre class="demo-model">{{ model }}</pre>
<z-form v-model="model" :list="list" :span="8" label-width="80px"></z-form>
</div>
</template>
<script>
export default {
data() {
return {
model: { name: '', age: '', company: '', address: '', time: '', salary: '' },
list: [
{
group: { title: '基础信息' },
list: [
{ type: 'el-input', label: '姓名', key: 'name', rules: [{ required: true, message: '请输入', trigger: 'change' }], span: 12 },
{ type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' }, span: 12 },
],
},
{
group: { title: '工作信息' },
list: [
{ type: 'el-input', label: '公司', key: 'company' },
{ type: 'el-input', label: '地址', key: 'address' },
{ type: 'el-input', label: '时限', key: 'time' },
{ type: 'el-input', label: '薪资', key: 'salary' },
],
},
]
}
},
}
</script>
:::
11a6548375b3ac8f8325326abe99861983ba760d/examples/views/docs/component/form.md#">自定义渲染
对于一些特殊渲染逻辑的表单项，可以进行自定义渲染
::: snippet 通过render方法渲染
<template>
<div>
<pre class="demo-model">{{ model }}</pre>
<z-form v-model="model" :list="list" label-width="80px"></z-form>
</div>
</template>
<script>
export default {
data() {
return {
model: { name: '', age: '' },
list: [
{ type: 'el-input', label: '姓名', key: 'name' },
{ type: 'el-input', label: '年龄', key: 'age', type: (h, { model, config }) => { return h('el-input-number', config, model.age) }, props: { 'controls-position': 'right' } },
]
}
},
}
</script>
:::
::: snippet 通过slot插槽渲染
<template>
<div>
<pre class="demo-model">{{ model }}</pre>
<z-form v-model="model" :list="list" label-width="80px">
<template slot="name">
<el-radio v-model="model.name" label="zs">张三</el-radio>
<el-radio v-model="model.name" label="ls">李四</el-radio>
</template>
<template slot="age">
<el-slider v-model="model.age"></el-slider>
</template>
</z-form>
</div>
</template>
<script>
export default {
data() {
return {
model: { name: 'zs', age: 0 },
list: [
{ type: 'el-input', label: '姓名', key: 'name' },
{ type: 'el-input', label: '年龄', key: 'age' },
]
}
},
}
</script>
:::
API
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value | 值 | Object | - | - list | JSON Scheme配置项列表 | Array | - | [] formClass | 表单class | String | - | - titleClass | 标题class | String | - | - contentClass | 内容class | String | - | - itemClass | 表单项class | String | - | - groupClass | 表单分组class | String | - | - labelWidth | 表单项标题宽度 | String | - | - labelPosition | 表单项标题位置 | String | - | top size | 大小 | String | - | small span | 占位 | Number | - | 24
Events 事件
事件名称|说明|回调参数 -|-|- input | 表单值变化 | 表单model validate | 校验表单 | 是否通过,表单model