表单组件事件

• 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>

显示代码复制代码复制代码

组件对象

TIP

• input-table组件实际用法

<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>

显示代码复制代码复制代码