AVue中form表单添加自定义按钮并触发回调函数

原创于 2023-02-14 17:22:06 发布 · 2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

收录于

文章展示了如何在Avue框架中配置表单（form），包括使用v-model绑定数据，设置option属性，以及定义upload-preview和submit事件。option中详细配置了菜单位置、提交按钮文本、隐藏空按钮等，同时在组件事件中添加了点击回调函数，用于显示dialog对话框。

Avue配置

<avue-form v-model="settleInForm" :option="settleInOption" :upload-preview="uploadPreview" @submit="modifyEnterpriseInformation">

option配置

let option = {
menuPosition:'right',
submitText:'确认',
emptyBtn:false,
column:[
	{
            label: '',
            labelWidth:40,
            prop: 'divider',
            component: 'Divider',//ele分割线
            span:2,
            event:{
              click:()=>{
              //此处可以添加任意回调函数
              //也可以调用methods中定义的函数
                this.dialogVisible = true
              },
            },
            params: {
              html: '<el-button type="text" style="font-size: 12px;color: #1e9fff">修改</el-button>',
              contentPosition: "left",
            	}
      }
]