avue-form表单常用属性和用法

个人用法：在vue中可以单独建立一个option.js文件，放置默认的统一参数，在使用的vue组件中引入该文件，设置组件内特殊的参数。

全面参数请参考 avue官方文档

option.js文件

// 默认表单选项
export function formOption (config) {
  const option = {
    card: false,
    size: 'mini',
    labelWidth: '100', //弹出表单的标题的统一宽度
    labelPosition: 'left',
    submitText: '提交'
    //column:[
	//	{
	//		label:'名称',	//标题名称
	//		prop:'列字段',	//列字段（唯一）
	//		labelWidth:'100',	//标题名称宽度
	//		span:12,	//栅列
	//		gutter:20,	//项间距
	//		row:'false/true',	//是否单独成行
	//		disabled:false/true,	//禁止编辑
	//		tip:'文字提示',	//文字提示
	//		display:true/false,	//是否可见
	//		rules:Obj,	//验证规则
	//		type:'tree',	//类型
	//		dicData:[], //字典
	//		dicUrl:'',	//远程字典地址
	//		dicMethod:'get/post'	//字典请求方式
	//		dicQuery:obj, 	//字典请求方式
	//		props:{
	//			lable:'字典的名称属性值',
	//			value:'字典的值属性值',
	//			children:'字典的子属性值'
	//		},
	//		change:(value,column)=>{},
	//		click:(value,column)=>{}
	//		foucs:(value,column)=>{}
	//		blur:(value,column)=>{}
	//	},
	//	{}
	//]
  }
  return Object.assign({ ...option }, config)
}

组件

<avue-form 
:option="optionForm1" 
v-model="optionForm1Data"
@submit=submit()>
	<template slot="time">
	     <el-date-picker
	       size="mini"
	       v-model="optionForm1Data.time"
	       type="month"
	       format="yyyy-MM"
	       valueFormat="yyyy-MM"
	       @change="handleOption1Change(row)"
	       placeholder="选择日期"
	     >
	     </el-date-picker>
   </template>
   <template slot="menuForm"> 	//自定义操作菜单
      <el-upload
        :show-file-list="false"
        action="/api/..."
        :headers="headers"
        :on-error="handleError"
        :on-success="uploadSuccess"
        :before-upload="handleBefore"
        style="display: inline-block"
        ref="curd"
      >
      <el-button type="primary" size="mini" icon="el-icon-upload"
         >批量检测</el-button
       >
      </el-upload>
      <el-button
        type="success"
        size="mini"
        icon="el-icon-download"
        @click="download"
      >
        下载模板
      </el-button>
    </template>
 </avue-form>
 
import { formOption } from "options";
const optionForm1 = formOption({
  labelWidth: 80,
  emptyBtn: false,
  submitBtn: false,
  column: [
    {
      label: "公司",
      prop: "id",
      with:100
    },
    {
      label: "日期",
      prop: "time",
    }
  ]
});
export default {
  data() {
    return {
      optionForm1,
      optionForm1Data: {
        companyId: "",
        time: ""
      },
    };
  },
}