avue参数个人总结

文章目录

avue参数个人总结
前言
一、avue-crud 配置项参数简介
二、avue option配置项参数简介
- 1.页面引入option
- 2.option写法

前言

本文参数只针对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 激活是trueheight:'auto',     //表格高度calcHeight: 30,    //表格高度差（主要用于减去其他部分让表格高度自适应）tip: "我是一个默认提示语",  //tip:'我是一个默认提示语',searchShow: true,      //首次加载是否显示搜索searchMenuSpan: 4, //搜索按钮长度searchSpan:6,      //搜索框长度  最大长度24border: true,      //表格边框是否显示index: true,       //是否显示序号viewBtn: true,     //是否显示查看按钮selection: true,//表格是否显示可选selectdialogClickModal: false,//是否可以通过点击modal关闭DialogupdateBtn:false,//更新按钮cancelBtn:false,//新增编辑里面自带取消按钮saveBtn:false,//新增编辑里面自带的保存按钮//   按钮文案 查看官网 https://www.avuejs.com/crud/crud-text.html#%E6%99%AE%E9%80%9A%E7%94%A8%E6%B3%95addBtn:false,      //是否显示添加按钮editBtn:false,     //是否显示编辑按钮delBtn:false,      //是否显示删除按钮excelBtn:false,    //表格导出按钮是否显示labelWidth:120,    //表单前面的标题长度refreshBtn: false, //表格上面小的 刷新按钮columnBtn: false,  //表格上面小的 列表按钮searchBtn: false,  //表格上面小的 搜索按钮menu: true,        //是否显示操作栏column:[{label: "用户名",//表格的标题prop: "username",//表格的keywidth: "150",//表格的宽度fixed: true,//是否冻结列type: "input",       //输入框类型select | radio | checkbox | date|tree 默认为textaddDisplay: 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 }