个人用法 :在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: ""
                    个人用法:在vue中可以单独建立一个option.js文件,放置默认的统一参数,在使用的vue组件中引入该文件,设置组件内特殊的参数。全面参数请参考 avue官方文档option.js文件// 默认表单选项export function formOption (config) {  const option = {    card: false,    size: 'mini',    labelWidth: '100', //弹出表单的标题的统一宽度    labelPosition: 
import AvueFormDesign from '@sscfaith/avue-form-design'
Vue.use(AvueFormDesign)
<avue-form-design style=
此方法接受俩个参数props,context俩个参数。
其一props组件接收的值,
其二是一个普通的javascript的对象,可以使用一些vue的方法slots,attrs,emit等,
因为,setup实在组件创建之前,所以无法访问data,computed,methods等
手脚架上使用props
因为props是响应式的,所以我们在用es6解构的时候不能直接解构需要使用 toRef
	<template>
		<div>{
  <h2>年龄:{{ age }}</h2>
  <h2>性别:{{ sex }}</h2>
  <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
可以一次性创建多个工单,并且点击就医时,显示医生等选项,选择清扫时,显示清扫范围选项。input-table选择责任人时,回填责任人的联系方式
三、项目思路
1、使用avue的 子表单功能 type:form
2、使用avue的input-table组件
1、首次怎么添加第一条数据
手动执行一次添加子表单数据操作
this.$refs["avue-form"].$refs.workOrders[0].$refs.temp.addRow();
2、虽然能够监听到工单类型的值
  <basic-container>
    <div class="app-container calendar-list-container">
      <avue-crud :option="option"
                 ref="crud"
                 v-model="form"
1. label:用于显示表单项的标签文本。
2. prop:用于指定表单项对应的数据源字段,即model中的属性名。
3. required:用于指定表单项是否为必填项,可以是一个布尔值或者动态绑定的变量。
4. rules:用于指定表单项的验证规则,可以是一个数组或者动态绑定的变量。
5. label-width:用于指定表单项标签的宽度。
例如,在element-ui的el-form中,可以使用el-form-item的属性来配置表单项的验证规则和必填项。通过prop属性指定表单项对应的数据源字段,在rules属性中定义验证规则。同时,可以使用required属性来指定表单项是否为必填项。
总结来说,el-form-item的属性用于配置表单项的各种属性,包括标签、数据源字段、验证规则和必填项等。这些属性可以根据实际需求进行配置,以满足表单的验证和展示要求。[1][2][3]
				首次使用IDEA创建maven项目出现“Dependency ‘org.springframework.bootspring-boot-starter-web‘ not found”问题