# 表单组件事件
change
事件click
事件focus
事件blur
事件enter
事件
# 组件事件
目前组件有5个事件change
,click
,focus
,blur
,enter
<template>
<avue-form :option="option"
v-model="obj"></avue-form>
</template>
<script>
export default {
data () {
return {
obj: {
name: '11'
},
data: [],
option: {
column: [{
label: '姓名',
prop: 'name',
change: ({ value, column }) => {
this.$message.success('change事件查看控制台')
console.log('值改变', value, column)
},
click: ({ value, column }) => {
this.$message.success('click事件查看控制台')
console.log('点击事件', value, column)
},
focus: ({ value, column }) => {
this.$message.success('focus事件查看控制台')
console.log('获取焦点', value, column)
},
blur: ({ value, column }) => {
this.$message.success('blur事件查看控制台')
console.log('失去焦点', value, column)
},
enter: ({ value, column }) => {
this.$message.success('enter事件查看控制台')
console.log('回车事件', value, column)
}
}]
}
}
}
}
</script>
显示代码复制代码复制代码
# 组件对象
<template>
<avue-form ref="form"
v-model="form"
:option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
form: {},
option: {
labelWidth: 120,
column: [{
label: '测试框',
prop: 'text',
}]
}
};
},
mounted () {
setTimeout(() => {
this.$message.success('查看控制台');
console.log('text的ref对象')
console.log(this.$refs.form.getPropRef('text').$refs.temp)
})
}
}
</script>
显示代码复制代码复制代码
# 组件交互
可以写判断逻辑,返回对应改变的对象属性
<template>
<avue-form :option="option"
v-model="form"></avue-form>
</template>
<script>
export default {
data () {
return {
form: {
text1: 0,
},
option: {
column: [{
label: '内容1',
prop: 'text1',
type: 'radio',
control: (val, form) => {
if (val === 0) {
return {
text2: {
display: true
},
text3: {
label: '内容3'
}
}
} else {
return {
text2: {
display: false
},
text3: {
label: '有没有发现我变了'
}
}
}
},
dicData: [{
label: '显示',
value: 0
}, {
label: '隐藏',
value: 1,
}]
}, {
label: '内容2',
prop: 'text2',
display: true
}, {
label: '内容3',
prop: 'text3'
}]
}
}
}
}
</script>
显示代码复制代码复制代码