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