# 表单自定义
# 自定义内容
<template>
<avue-form v-model="form"
:option="option">
<template #text="{disabled,size}">
<div>
<el-tag>{{form.text?form.text:'暂时没有内容'}}</el-tag>
<el-input :disabled="disabled"
:size="size"
v-model="form.text"
placeholder="这里是自定的表单"></el-input>
</div>
</template>
</avue-form>
</template>
<script>
export default {
data () {
return {
form: {
text: ''
},
option: {
labelWidth: 120,
column: [{
label: '姓名',
prop: 'text',
rules: [{
required: true,
message: "请输入姓名",
trigger: "blur"
}]
}]
}
};
}
}
</script>
显示代码复制代码复制代码
# 自定义标题
<template>
<avue-form v-model="form"
:option="option">
<template #text-label="{}">
<el-tooltip class="item"
effect="dark"
content="文字提示"
placement="top-start">
<span>姓名</span>
</el-tooltip>
</template>
</avue-form>
</template>
<script>
export default {
data () {
return {
form: {
text: ''
},
option: {
labelWidth: 120,
column: [{
label: '姓名',
prop: 'text',
rules: [{
required: true,
message: "请输入姓名",
trigger: "blur"
}]
}]
}
};
}
}
</script>
显示代码复制代码复制代码
# 自定义错误提示
<template>
<avue-form v-model="form"
:option="option">
<template #text-error="{error}">
<p style="color:green">自定义提示{{error}}</p>
</template>
</avue-form>
</template>
<script>
export default {
data () {
return {
form: {
text: ''
},
option: {
labelWidth: 120,
column: [{
label: '姓名',
prop: 'text',
rules: [{
required: true,
message: "请输入姓名",
trigger: "blur"
}]
}]
}
};
}
}
</script>
显示代码复制代码复制代码
# 自定义按钮
<template>
<avue-form ref="form"
v-model="form"
:option="option">
<template #menu-form="{}">
<el-button icon="el-icon-user"
type="primary"
@click="handleSubmit">提 交</el-button>
<el-button icon="el-icon-delete"
@click="handleEmpty">清 空</el-button>
</template>
</avue-form>
</template>
<script>
export default {
data () {
return {
form: {},
option: {
emptyBtn: false,
submitBtn: false,
column: [{
label: "用户名",
prop: "username",
rules: [{
required: true,
message: "请输入用户名",
trigger: "blur"
}]
}]
}
}
},
methods: {
handleEmpty () {
this.$refs.form.resetForm();
},
handleSubmit () {
this.$refs.form.validate((valid, done, msg) => {
if (valid) {
this.$message.success(JSON.stringify(this.form));
setTimeout(() => {
done()
}, 2000)
}
})
}
}
}
</script>
显示代码复制代码复制代码
# 自定义样式
.formClassName{
background-color: #409eff;
.el-form-item__label{
color:#fff;
}
}
className
属性配置上样式的名字即可
<template>
<avue-form :option="option"
v-model="form"> </avue-form>
</template>
<script>
export default {
data () {
return {
form: {},
option: {
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex',
span: 24,
className: 'formClassName'
}
]
}
}
}
}
</script>
显示代码复制代码复制代码
# render渲染
<template>
<avue-form v-model="form"
:option="option"></avue-form>
</template>
<script>
import { h } from 'vue'
export default {
data () {
return {
form: {},
option: {
column: [{
label: '姓名',
prop: 'text',
render: (params) => {
return h('p',
{
attrs: { id: 'box' },
class: { 'demo': true },
style: { color: 'pink', lineHeight: '30px' },
}, 'Hello World Avue')
}
}]
}
};
}
}
</script>
显示代码复制代码复制代码
# 引入三方组件
{}
<template>
{{obj}}
<avue-form :option="option"
v-model="obj"></avue-form>
</template>
<script>
export default {
data () {
return {
obj: {},
option: {
column: [
{
label: '文本1',
prop: 'text1'
},
{
label: '',
labelWidth: 40,
prop: 'divider',
component: 'elDivider',//ele分割线
span: 24,
event: {
click: () => {
this.$message.success('点击方法')
},
},
params: {
html: '<h2 style="color:red">自定义html标签,点我触发方法</h2>',
contentPosition: "left",
}
},
{
label: '文本2',
prop: 'text2'
},
{
label: '',
labelWidth: 40,
prop: 'calendar',
component: 'elCalendar',//ele日期
span: 24,
params: {
}
}
]
}
}
}
}
</script>
显示代码复制代码复制代码