avue是将elemenui封装了一遍,主要是一些增删改查的封装，用起来非常便捷,但是不熟悉其中的配置的话还没直接使用elementui开发来的快.使用avue开发的话特别是一些需要自定义的内容，感觉挺坑，文档也不友好。最近一个项目使用avue开发的，记录一下使用心得
下面是具体的参数配置：
主要需要注意的是分组表单里面的字段联动control是不生效的，tree下拉框的话可以使用nodeClick方法来通过dispaly字段进行控制 选中的话是checked事件
获取对应字段的ref属性可以使用：this.$refs.crud.getPropRef('deptId');
获取对应字段的所有数据和属性：this.findObject(this.option.group, "roleId");
字段联动的时候可以使用watch来监听 比较方便
tree树形下拉框的全选和反选可以通过setChecked来实现，下面是一个例子
<avue-crud :option="option"
:search.sync="search"
:table-loading="loading"
:data="data"
node-key="id"
ref="crud"
v-model="form"
:permission="permissionList"//这个是按钮权限控制 也可以直接在option里面单独配置
@row-del="rowDel"//删除行回调
@row-update="rowUpdate"//更新时回调
@row-save="rowSave"//保存时回调
:before-open="beforeOpen"//弹框表单打开时的回调
:page.sync="page"
@search-change="searchChange"//查询按钮回调函数，默认有两个参数 form与done， form为搜索框的值，done为关闭搜索的刷新状态回调函数
@search-reset="searchReset"
@selection-change="selectionChange"//当表格选择项勾选发生变化时会触发该回调函数
@current-change="currentChange"//表格页码发生变化时触发，第一个参数为当前页码
@size-change="sizeChange"//每页显示数量变化时回调 参数页面展示数量pageSize
@refresh-change="refreshChange"//刷新
:row-class-name="customRowClass"
@on-load="onLoad">
//表格顶部左侧菜单配置
<template slot="menuLeft">
<el-button type="info"
size="small"
icon="el-icon-user">
角色配置
</el-button>
</template>
//表格字段展示自定义
<template slot-scope="{row}"
slot="name">
<el-tag>{{row.name}}</el-tag>
</template>
//弹框表单字段自定义 字段名+From
<template slot-scope="{type,disabled}" slot="nameForm">
<el-tag v-if="type=='add'">新增</el-tag>
<el-tag v-else-if="type=='edit'">修改</el-tag>
<el-tag v-else-if="type=='view'">查看</el-tag>
<el-input :disabled="disabled" v-model="form.name"></el-input>
</template>
//弹框表单字段标题自定义 字段名+Label
<template slot-scope="scope" slot="nameLabel">
<span>姓名 </span>
<el-tooltip class="item" effect="dark" content="文字提示" placement="top-start">
<i class="el-icon-warning"></i>
</el-tooltip>
</template>
</avue-crud>
<script>
export default {
data() {
return {
form:{},
option:{
size:'', // 组件尺寸
maxHeight:'', // 表格的最大高度
index:'', // 是否有序号
indexWidth:'', // 序号列宽度
indexFixed:'', // 序号列是否冻结列
menu:'', // 是否有操作栏
menuWidth:'', // 操作栏宽度
menuTitle:'', // 操作栏标题
menuFixed:'', // 操作栏列冻结列
menuType:'', // 操作栏按钮样式
menuHeaderAlign:'', // 操作栏表头的对齐方式
title:'', // 表格标题
addBtn:'', // 表格新增按钮；edit（修改）、del（删除）、view（查看）、update（修改）、save（保存）、cancel（取消）、search（查询）、empty（清空）
addBtnText:'', // 表格新增按钮文案
addBtnIcon:'', // 表格新增按钮图标
printBtn:'', // 表格打印按钮
excelBtn:'', // 表格导出按钮
filterBtn:'', // 表格自定义过滤按钮
refreshBtn:'', // 表格刷新数据按钮
columnBtn:'', // 表格列操作按钮
searchShowBtn:'', // 表格搜索显隐按钮
copyBtn:'', // 表格复制数据按钮
addTitle:'', // 表格新增弹窗标题 edit（修改）、view（查看）
dialogDrag:'', // 表格弹窗是否可以拖拽
searchIndex:'', // 表格搜索半收缩个数
searchPlaceholder:'', // 搜索项辅助文字
searchSpan:'', // 搜索项框栅列
searchGutter:'', // 搜索项框间距
searchLabelWidth:'', // 搜索项标题宽度
searchLabelPosition:'', // 搜索项标题位置
column:[//表格字段和弹框表单字段定义
{
label:'', // 列标题
prop:'', // 列标题的内容属性名称
type:'', //
width:'', // 对应列的宽度
minWidth:'', // 对应列的最小宽度
fixed:'', // 列固定
hide: false, // 隐藏列是否在列表展示
sortable:'', // 对应列是否可以排序，监听 sort-change 回调，true, false, 'custom'
formatter:'', // 格式化列内容，(row, value, row, column)
overHidden:'', // 当内容过长被隐藏时显示 tooltip
align:'', // 对齐方式
headerAlign:'', // 表头对齐方式
filters:'', // 数据过滤的选项
search:'', // 是否为搜索项
searchValue:'', // 搜索项初始化值
searchPlaceholder:'', // 搜索项辅助文字
searchSpan:'', // 搜索项框栅列
searchOrder:'', // 搜索项位置排序，序号越大越靠前
searchLabelWidth:'', // 搜索项标题宽度
searchClearable:'', // 搜索项清除
searchMultiple:'', // 搜索项是否多选
searchTags:'', // 搜索项将选中值按文字的形式展示
display:'', // 弹出表单是否显示
disabled:'', // 弹出表单是否禁止
addDisabled:'', // 表单新增时项是否禁止，edit（编辑）、view（查看）
addDisplay:'', // 表单新增时项是否显示，edit（编辑）、view（查看）
resizable:'', // 对应列是否可以通过拖动改变宽度（需要在option中border属性为真）
searchClearable:'', // 搜索项清除
searchClearable:'', // 搜索项清除
searchClearable:'', // 搜索项清除
dicData:[ // 下拉项字典枚举
{label:'A',value: 'a'},
],
control:(val,form)=>{//这个是和其他字段互动的配置 但是分组表单里面这个不生效
if(val===0){//控制text2 和text3这个字段的显示和隐藏
return {
text2:{
display:true
},
text3:{
label:'内容3'
}
}
}
},
rules:[ // 表单字段校验规则
{equired: true,message: "请输入姓名",trigger: "blur"},
],
}
],
group:[//表单分组配置 字段配置和上面列表的配置是一样的
{
label: '基础信息',
prop: 'baseInfo',
icon: 'el-icon-user-solid',
column:[
{
label: '类型',
prop: 'baseInfo',
multiple: false,//是否多选控制
type: "tree",
dicData: [],
nodeClick:(data)=>{//点击下拉元素时的事件
this.handleSelectRole(JSON.stringify(data))
},
checked:(checkedNodes, checkedKeys)=>{//选中下拉款元素事件
}
}
]
}
]
}
}
}
}
</script>
