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

组件

	
   
 
 
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: ""
      },
    };
  },
}