AVUE 表单常用参数属性说明

1、avue-crud

<avue-crud     :option="option"                 //表格配置属性             
               :table-loading="loading"         //表格等待框的控制，加载的时候转圈圈，设置true/false
               :search.sync="search"            //搜索的变量(需要sync修饰符)
               :visible.sync="changeInfo"       //是否显示，设置true/false
               :data="data"                     //表格显示的数据
               :page.sync="page"                //表格分页配置选项(需要sync修饰符)
               :permission="permissionList"     //权限控制
               :before-open="beforeOpen"        //打开前的回调function(file,column)
               v-model="form"                   //数据模型 用来存取页面值的 
               ref="crud"                       //在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
               @cell-click="pageto"             //表格点击运行方法 onclick方法定义
               @row-update="rowUpdate"          //修改数据后点击确定触发该事件
               @row-save="rowSave"              //新增数据后点击确定触发该事件
               @row-del="rowDel"                //行数据删除时触发该事件
               @row-click="handleRowClick"      //单击行运行的方法
               @search-change="searchChange"    //搜索栏变化事件
               @search-reset="searchReset"      //清空搜索栏变化事件
               @selection-change="selectionChange"//选择框变化变化事件
               @current-change="currentChange"  //点击页码会调用current-change方法回调当前页数，返回当前第几页
               @size-change="sizeChange"       //点击每页多少条会调size-change方法回调
               @refresh-change="refreshChange" //点击刷新按钮触发该事件
               @on-load="onLoad">              //打开表格页面的方法，一般用来初始化，返回页面数据
          

2、option配置

option: {
          height:'auto',                 //表格高度
          emptyText: "暂无数据哦~",       //数据为空的提示
          calcHeight: 30,                //表格高度差（主要用于减去其他部分让表格高度自适应）
          tip: false,                    //提示信息
          searchShow: true,              //首次加载是否显示搜索
          searchMenuSpan: 4,             //搜索按钮长度
          searchSpan:6,                  //搜索框长度  最大长度24
          border: true,                  //表格边框是否显示
          index: true,                   //是否显示序号
          viewBtn: true,                 //是否显示查看按钮
          selection: true,               //搜索框显示
          addBtn:false,                  //是否显示添加按钮
          editBtn:false,                 //是否显示编辑按钮
          delBtn:false,                  //是否显示删除按钮
          excelBtn:false,                //表格导出按钮是否显示
          labelWidth:120,                //表单前面的标题长度
          refreshBtn: false,             //表格上面小的 刷新按钮
          columnBtn: false,              //表格上面小的 列表按钮
          searchBtn: false,              //表格上面小的 搜索按钮
          menu: true,                    //是否显示操作栏
          defaultExpandAll:true,         //树默认展开
          column:[
             {
              label: "",                 //表单属性名称
              prop: "",                  //属性对应实体类字段
              type: "",                  //输入框类型
              addDisplay: false,         //新增时是否显示
              editDisplay: false,        //编辑时是否显示
              viewDisplay: true,         //详情时是否显示
              hide: true,                //表单查询时是否显示
              display: true,             //在查看，新增，编辑页面是否显示
              labelWidth:'100',	         //标题名称宽度
              span: 24,                  //24一条数据占一行，8一行3条数据
              gutter:20,	             //项间距
              addDisabled: true,         //添加的时候不能修改
              editDisabled: true,        //编辑的时候不能修改
              sortable:true,             //排序方式切换，倒序、正序切换
              maxlength: 30,             //字数限制
              showWordLimit:true,        //显示字数限制
              defaultExpandAll:true,     //树默认展开
              search：true,              //查询是否显示
              searchFilterable:true,     //select选择框匹配
              showColumn:false,          //列显隐中是否有
              addDisplay: false,         // 添加弹窗不显示
              editDisplay: false,        // 编辑弹窗不显示
              viewDisplay: false         // 查看弹窗不显示
              disabled:true,             //表单item禁用
              row:'false/true',          //是否单独成行
              rules:Obj,	             //验证规则
              dicData:[],                //字典
			  dicUrl:'',	             //远程字典地址
			  dicMethod:'get/post'	     //字典请求方式
			  dicQuery:obj, 	         //字典请求方式
			  props:{
				lable:'字典的名称属性值',
				value:'字典的值属性值',
				children:'字典的子属性值'
			  },

            }

参考网址：avue curd 各参数作用_快乐星球吃瓜，的博客-CSDN博客