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>
