avue参数个人总结

**

avue参数个人总结

**

---

前言

本文参数只针对avue2.5.3版本其他版本需要自己测试
链接: avue官网

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、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"    //打开前的回调  beforeOpen(done, type) 
        v-model="form"               //数据模型(新增编辑时候的数据) 用来存取页面值的 
        ref="crud"  //在普通的 DOM 元素上使用，自定义按钮是需要调用原来的新增接口需要用到，引用指向的就是 DOM 元素；
        @cell-click="pageto"         //当某个单元格被点击时会触发该事件，具体属性row, column, cell, event
        @cell-dblclick="celldblclick"//当某个单元格被双击时触发，具体属性row, column, cell, event
        @row-click="rowclick"	//当某一行被点击时会触发该事件	row,event,column
        @row-dblclick="rowdbclick"	//当某一行被双击时会触发该事件	row,column
        @row-update="rowUpdate"//修改数据回调
        @refresh-change="refreshchange"//刷新按钮回调
        @row-save="rowSave"          //新增数据后点击确定触发该事件
        @row-del="rowDel"            //行数据删除时触发该事件
        @search-change="searchChange"//点击搜索后触发该事件 params
        @search-reset="searchReset"  //清空搜索回调方法
        @selection-change="selectionChange"//当选择项发生变化时会触发该事件 官网多选有案例
        @current-change="currentChange" //点击页码会调用current-change方法回调当前页数，返回当前第几页
        @size-change="sizeChange"      //点击每页多少条会调size-change方法回调
        @on-load="onLoad"//打开表格页面的方法，一般用来初始化，返回页面数据
        >   
        </avue-crud> 
             

二、avue option配置项参数简介

1.页面引入option

代码如下（示例）：
import 组件名称from “组件地址”;

2.option写法

代码如下（示例）：

  option: {
          tabs:false,//会让表单分组变成选项卡 默认时false 激活是true
          height:'auto',     //表格高度
          calcHeight: 30,    //表格高度差（主要用于减去其他部分让表格高度自适应）
          tip: "我是一个默认提示语",  //tip:'我是一个默认提示语',
          searchShow: true,      //首次加载是否显示搜索
          searchMenuSpan: 4, //搜索按钮长度
          searchSpan:6,      //搜索框长度  最大长度24
          border: true,      //表格边框是否显示
          index: true,       //是否显示序号
          viewBtn: true,     //是否显示查看按钮
          selection: true,//表格是否显示可选select
          dialogClickModal: false,//是否可以通过点击modal关闭Dialog
          updateBtn:false,//更新按钮
          cancelBtn:false,//新增编辑里面自带取消按钮
          saveBtn:false,//新增编辑里面自带的保存按钮
        //   按钮文案 查看官网 https://www.avuejs.com/crud/crud-text.html#%E6%99%AE%E9%80%9A%E7%94%A8%E6%B3%95
          addBtn:false,      //是否显示添加按钮
          editBtn:false,     //是否显示编辑按钮
          delBtn:false,      //是否显示删除按钮
          excelBtn:false,    //表格导出按钮是否显示
          labelWidth:120,    //表单前面的标题长度
          refreshBtn: false, //表格上面小的 刷新按钮
          columnBtn: false,  //表格上面小的 列表按钮
          searchBtn: false,  //表格上面小的 搜索按钮
          menu: true,        //是否显示操作栏
          column:[
             {
              label: "用户名",//表格的标题
              prop: "username",//表格的key
              width: "150",//表格的宽度
              fixed: true,//是否冻结列
              type: "input",       //输入框类型select | radio | checkbox | date|tree 默认为text
              addDisplay: false,   //新增时是否显示
              editDisplay: false,  //编辑时是否显示
              viewDisplay: true,   //详情时是否显示
              hide: true,          //表单查询时是否显示默认显示
              display: true,       //在查看，新增，编辑页面是否显示
              span: 24,            //24一条数据占一行，8一行3条数据
              addDisabled: true,    //添加的时候不能修改
              editDisabled: true,   //编辑的时候不能修改
              sortable:true,        //排序方式切换，倒序、正序切换
              labelWidth: 0,        //标题label距离左边的位置
              detail: true,         //表单输入框是否显示边框
              readonly:true,        //表单输入框是否只读
              row: true,            //后面换行 表单生效
              visdiplay:true,//表单不显示
              overHidden: true,//超出省略号显示
              formslot:true,//自定义表单
              slot:true,//自定义表格列
              rules: [{    //表单校验规则
                  required: true,   //是否必填
                  message: "请输入用户名",  //提示信息 
                  trigger: "blur" }
                ] 
            // 字典查看官网 字典
            },
            //日期       
           {
              label: "开始时间",
              prop: "startTime",
              type: "datetime",
              format: "yyyy-MM-dd hh:mm:ss",//日期格式解析
              rules: [{
                required: false,
                message: "请输入开始时间",
                trigger: "blur"
              }]
            },
             {
            
              label: '',
              prop: 'info',
              span: 24,
              addDisplay: false,
              hide: true,
              slot: true,  //加一个插槽 子表可以放这里
            }
          ],

        }},

下面是一些零碎的事件 主要是写tree遇到的
Events
事件名 说明 参数
current-change 切换页面时触发该事件 page
current-row-change 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的highlightCurrentRow属性为true currentRow,oldCurrentRow
select 单个选择回调 selection, row
selectAll 勾选全选 selection
date-change 表格日期回调方法 date
filter-change 过滤回调函数 params
cell-mouse-enter 当单元格 hover 进入时会触发该事件 row, column, cell, event
cell-mouse-leave 当单元格 hover 退出时会触发该事件 row, column, cell, event
cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
row-update 编辑数据后确定触发该事件 row,index,done,loading
row-save 新增数据后点击确定触发该事件 row,done,loading
row-del 行数据删除时触发该事件 row,index
row-click 当某一行被点击时会触发该事件 row,event,column
row-dblclick 当某一行被双击时会触发该事件 row,column
refresh-change 点击刷新按钮触发该事件 page
size-change 页面每页显示的条数触发该事件 pageSize
sort-change 调用排序后触发该事件 list
search-change 点击搜索后触发该事件 params,done
search-reset 清空搜索回调方法 -
selection-change 当选择项发生变化时会触发该事件 selection
toggleRowExpansion 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开
row, expanded

分页

{ “total”: 200, “pagerCount”: 5, “currentPage”: 1, “pageSize”: 20, “pageSizes”: [ 10, 20, 30, 40, 50, 100 ], “background”: true }