### 前言 - Avue的v2版本是一个基于element-ui低代码前端框架 - Avue的v3是一个基于element-plus低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率 - Avue对于后台管理系统的开发极其便捷，就是配置不容易记住，熟练该框架配置来开发会好点，不然真不如直接用element来开发的好 ### Avue-vue2的官网地址 [点击跳转Avue官网](https://v2.avuejs.com/docs/installation/) ### AvueUI框架Crud的常用 ```js option: { align:'center', // 表格列齐方式 addBtnText:'', // 表格新增按钮文案 addBtnIcon:'', // 表格新增按钮图标 addTitle:'', // 表格新增弹窗标题 edit（修改）、view（查看） addBtn:true, // 表格行新增按钮 editBtn（表格行修改按钮）、delBtn（删除）、viewBtn（查看）、updateBtn（修改）、saveBtn（保存）、cancelBtn（取消）、searchBtn（查询）、emptyBtn（清空） border: true, // 是否带有纵向边框 columnBtn:false, //列动态显隐按钮 cancelBtn:false, // 行编辑取消按钮 calcHeight: 30, copyBtn:'', // 表格复制数据按钮 dialogClickModal: true, // 表格弹窗是否可以通过点击modal关闭 dialogDrag:'', // 表格弹窗是否可以拖拽 excelBtn: false, // 是否在左上角显示表格导出按钮 excelBtn:'', // 是否在左上角显示表格导出按钮 expandFixed: false, // 展开列是否冻结列 filterBtn:'', // 表格自定义过滤按钮 height: "auto", // 表格的高度，默认为自动高度。如果设置为auto，会自适应窗口高度，配合calcHeight参数去调节范围 index: true, // 是否有序号 indexLabel: "序号", // 序号列标题的名字 indexFixed: false, // 序号列是否冻结列 indexWidth:'', // 序号列宽度 labelWidth: 130, // 标签宽度 menuWidth: 200, // 表格的操作栏这一列的宽度 menuFixed: false, // 操作栏列冻结列 maxHeight:'', // 表格的最大高度 menu:'', // 是否有操作栏 menuTitle:'', // 操作栏标题 menuType:'text', // 操作栏按钮样式 menuAlign: "left", // 操作栏按钮的对齐方式 menuHeaderAlign:'', // 操作栏表头的对齐方式 printBtn:'', // 是否在左上角显示表格打印按钮 reserveSelection: true, //翻页多选 refreshBtn:'', // 表格刷新按钮 selection: true, // 表格前面是否有选择框 saveBtn:false, // 保存按钮 searchShow: true, // 表格搜索首次是否展示 searchShowBtn:'', // 表格搜索显隐按钮 searchMenuSpan: 24, // 顶部搜索右侧的搜索、清空、展开等按钮所占的比例24:24 searchMenuPosition: "right", // 表格搜索按钮位置 searchLabelWidth: 130, // 搜索项标题宽度 selectFixed: false, searchIndex: 3, // 表格搜索半收缩个数 searchIcon: true, // 表格搜索半收缩按钮 selectionFixed: false, // 选择框列是否冻结列 size:'', // 组件尺寸 searchPlaceholder:'', // 搜索项辅助文字 searchSpan:'', // 搜索项框栅列 searchGutter:'', // 搜索项框间距 searchLabelPosition:'', // 搜索项标题位置 tip: true, title:'表格的标题', 'table-loading':'', // 表格等待框的控制 updateBtn:false, // 更新按钮 viewBtn: true, // 是否在右上角显示表格查看按钮 // 表格列配置 column:[ // 表格列配置 { addBtn: true, //表格右侧操作列的添加按钮 align: “center”, //表格列对其方式left/center/right，覆盖table的align addDisabled:'', // 表单新增时项是否禁止，edit（编辑）、view（查看） addDisplay:'', // 表单新增时项是否显示，edit（编辑）、view（查看） addDisabled:false, //表单编辑时是否禁止 addDisplay:false, //表单编辑是否可见 border: true, //是否显示表格边框 calcHeight: “auto”, //表格高度差（主要用于减去其他部分让表格高度自适应） clearable:true, //表单清空 columnBtn: true, //列显隐按钮 display:'', // 弹出表单是否显示 disabled: true, // 弹出表单是否禁止 delBtn: true, //表格右侧操作列的删除按钮 dicMethod: '', //传入字典的请求方式 dicQuery: '', //传入字典的请求参数Object dicUrl: "/api/blade-system/dict/dictionary?code=flag" //字典的网络请求接口（例如配置/xxx/xx/{{key}},这样的格式，在column中dicData自动匹配prop字段名） // 下拉项字典枚举，静态的，前端写死的数据 dicData: [ { label: "启用保险", value: "启用保险", }, { label: "停用保险", value: "停用保险", }, ], // 下拉项字典枚举，调用接口获取的 dataType: "string", // 下拉项数据的类型 defaultSort:表格的排序字段{prop:‘date’,order:‘descending/ascending’}prop默认排序字段，order排序方式 display: false, // 表格的查看、编辑、详情按钮等等，打开的弹框中是否显示某一个搜索项的数据 expand: false, //是否展开折叠行 editDisabled:false, //表单编辑时项是否禁止 editDisplay:false, //表单编辑项是否可见 editBtn: true, //表格对应行右侧的编辑按钮 fixed:'', // 列固定 formatter:'', // 格式化列内容，(row, value, row, column) filters:'', // 数据过滤的选项 format:"yyyy年MM月dd日 HH时mm分ss秒", //搜索项显示值时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date formslot:false, //表单自定义 fixed:true, //冻结列 formWidth:“auto”, //表单宽度 formHeight:“auto”, //表单行高度 headerAlign:'', // 表头对齐方式 height: “auto”, //表格高度 hide:true, //隐藏列表格起作用 index: false, //是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数） indexLabel: “#”, //序号的标题 label:“租户ID”, //列名称 minWidth:'120', // 对应列的最小宽度 maxHeight: “auto”, //表格最大高度 menu: true, //是否显示操作菜单栏 menuWidth: 240, //表格列最小宽度 menuAlign: “left”, //菜单栏对齐方式left/center/right maxRows:4, //最大行（当type为textarea） minRows:2, //最小行（当type为textarea） multiple:false, //多选（当type为select/tree时） overHidden: true, // 表格数据超出，当内容过长被隐藏时显示 tooltip placeholder:“请输入租户ID”, //控件提示输入语句 precision:2, //数字框输入精度（当type为number时） prop: "money", // 搜索项中输入框对应的字段值 props: { // 列标题的内容属性名称，下拉框会用到，和 ttype:'select'一块使用 label: "dictValue", value: "dictKey", }, resizable:'', // 对应列是否可以通过拖动改变宽度（需要在option中border属性为真） refreshBtn: true, //刷新按钮 row: true, // 单独成一行，配合span一起使用表单字段校验规则,参考ele表单规则配置Object，rules不生效就换成searchRules rules: [ { required: true, message: "请选择是否申请理赔", trigger: "blur", }, ], sortable:'', // 对应列是否可以排序，监听 sort-change 回调，true, false, 'custom' search:true, //是否支持搜索 searchValue:'', // 搜索项初始化值 searchPlaceholder:'', // 搜索项辅助文字 searchSpan:'', // 搜索项框栅列 searchOrder:'', // 搜索项位置排序，序号越大越靠前 searchLabelWidth:'', // 搜索项标题宽度 searchClearable:'', // 搜索项清除 searchMultiple:'', // 搜索项是否多选 searchTags:'', // 搜索项将选中值按文字的形式展示 searchClearable:'', // 搜索项清除 searchClearable:'', // 搜索项清除 searchClearable:'', // 搜索项清除 stripe: true, //是否显示表格的斑马条纹 showHeader: true, //是否显示表格的表头 searchSize: “small”, //搜索控件的大小small/mini searchBtn: true, //搜索显隐按钮（当column中有搜索的属性，或则searchslot为true时自定义搜索启动起作用） sortable:false, //排序 span:12, //表单栅列 size:“medium”, //表单大小medium/small/mini slot:false, //列自定义支持自定义列 //搜索项的校验规则，searchRules不生效就换成rules searchRules: [ { max: 50, message: "最多输入50个字符", }, ], type: "select", // type类型为:input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree valueFormat:"yyyy-MM-dd HH:mm:ss", //真实值的时间格式（当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates) width:'', // 对应表格列的宽度 }, ], ``` > options对象中的： addBtn:true // 表格行右侧操作列是都显示`新增`按钮，显示的是Avue默认自带的 editBtn:true // 表格行右侧操作列是都显示`修改`按钮，显示的是Avue默认自带的 delBtn:true // 表格行右侧操作列是都显示`删除`按钮，显示的是Avue默认自带的 viewBtn:true // 表格行右侧操作列是都显示`查看`按钮，显示的是Avue默认自带的 updateBtn:true // 表格行右侧操作列是都显示`更新`按钮，显示的是Avue默认自带的 saveBtn:true // 表格行右侧操作列是都显示`保存`按钮，显示的是Avue默认自带的 cancelBtn:true // 表格行右侧操作列是都显示`取消`按钮，显示的是Avue默认自带的 searchBtn:true // 表格行右侧操作列是都显示`查询`按钮，显示的是Avue默认自带的 emptyBtn:true // 表格行右侧操作列是都显示`清空`按钮，显示的是Avue默认自带的 > column数组中，某一个对象内的 > `format:"yyyy年MM月dd日 HH时mm分ss秒"`, // 搜索项显示值时间格式 > 当type的值为date/time/datetime/daterangetimerange/datetimerange/week/month/year/date > 有效 > column数组中，某一个对象内的 > `type: "select",` > 当type类型为 >input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree > 有效 > column数组中，某一个对象内的 > `valueFormat:"yyyy-MM-dd HH:mm:ss",` //真实值的时间格式 > 当type为 > date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates > 有效 ### AvueUI框架Crud下拉框数据是从接口返回的，但是接口返回的数据格式和AvueUI框架规定的结构不一致，需要手动处理 ```js data() { return { option: { column:[ { placeholder: " ", label: "label产品", prop: "insureProductId", // disabled: true, // 弹出表单是否禁止 overHidden: true, search: true, // 是否为搜索项 type: "select", // 类型是下拉框 dicData: [], // 下拉框的初始值，在mounted方法中赋值 }, ] } } }， mounted(){ // 获取xxx下拉框数据 let params = {current:1,size:100,} // 调用接口获取下拉框数据 getXxxDropBoxData(params).then((res) => { const { code, data = [] } = res.data; if (code === 200) { // 整合数据，变成Avue框架，需要的下拉框的数据结构 // xxxId 是表格列的字段 let column = this.findObject(this.option.column,'xxxId'); // 为下拉框赋值 column.dicData = data.records.map(item => { const { id, productName } = item; return { // ...item, label: productName, value: id, } }) } }) }, ``` ### AvueUI框架Crud下拉框数据是从接口返回的 ```js { placeholder: " ", label: "label类型", prop: "labelType", disabled: true, // 弹出表单是否禁止 overHidden: true, search: true, // 是否为搜索项 type: "select", // 类型是下拉框 dicUrl: "/api/xxx/xxx/xxx?code=string_type", props: { label: "labelValue", value: "labeKey", }, dataType: "number", // 下拉框数据类型，给接口传参时候，接口需要的类型 }, ``` ### AvueUI框架Crud下拉框数据是前端写死的 ```js { placeholder: " ", label: "label状态", prop: "status", overHidden: true, search: true, // 是否为搜索项 type: "select", // 下拉框 // minWidth: '120', // 表格列的最小宽度 dicData: [ { label: "label保险11", value: "label保险11", }, { label: "label保险22", value: "label保险22", }, ], // rules: [ // { // required: true, // message: "请选择是否xxx", // trigger: "blur", // }, // ], // searchRules: [ // { // max: 50, // message: "最多输入50个字符", // }, // ], dataType: "string", // 下拉框数据类型，给接口传参时候，接口需要的类型 }, ``` ### avue 时间选择器限制时间范围 ```js ``` ### crud的group ```js group: [ 　　{ 　　　　label: 'label信息', 　　　　prop: 'jbxx', 　　　　icon: 'el-icon-edit-outline', 　　　　display: true, 　　　　column: [ 　　　　　　{ 　　　　　　　　label: "label类型", 　　　　　　　　prop: "relType1", 　　　　　　　　search: false, 　　　　　　　　span: 8, 　　　　　　　　editDisabled: true, 　　　　　　}, 　　　　　　{ 　　　　　　　　label: "label名称", 　　　　　　　　prop: "name", 　　　　　　　　span: 8, 　　　　　　　　search: false, 　　　　　　　　editDisabled: true, 　　　　　　} 　　　　] 　　}, 　　{ 　　　　label: 'label信息', 　　　　prop: 'jbxx', 　　　　span: 8, 　　　　icon: 'el-icon-edit-outline', 　　　　arrow: true, 　　　　column: [ 　　　　　　{ 　　　　　　　　label: "label类型", 　　　　　　　　prop: "breedType1", 　　　　　　　　span: 8, 　　　　　　　　hide: true, 　　　　　　　　editDisabled: true, 　　　　　　} 　　　　] 　　}, ] ``` ### crudde column类型写法 input框、时间选择器、上传图片等等 #### 1.基础输入框 ```js { label: "label标题", prop: "title", rules: [{ required: true, message: "请输入label标题", trigger: "blur" }], }, ``` #### 2.下拉选择框 ```js { label: "label负责人", prop: "labelId", type: "select", //类型为下拉选择框 dicUrl: "/api/xxx/xxx/xxx?code=xxxLv", //获取数据接口地址 props: { label: "labelValue", value: "labelKey" }, searchClearable:false,//可清空的输入框,默认为true dataType: "number", //数据类型用于数组和字符串之间的转化,默认string filterable: true, //添加filterable属性即可启用搜索功能 rules: [{ required: true, message: "请输入label负责人", trigger: "blur" }], }, ``` #### 3.时间控件框 ```js //年份类型： { label: "年份", prop: "yearTime", rules: [{ required: true, message: "请输入年份", trigger: "blur" }], type: "year",//类型为年份 format: "yyyy", valueFormat: "yyyy", //限制能选择的时间范围 pickerOptions: { // 禁用年份日期通过 disabledDate 设置 disabledDate(time) { return time.getTime() < Date.now(); }, } }, //普通日期类型： { label: "开始时间", prop: "startTime", type: "date",//类型为日期 format: "yyyy-MM-dd", valueFormat: "yyyy-MM-dd", rules: [{ required: true, message: "请选择开始日期", trigger: "blur" }], }, // 普通日期+时间类型： { label: "开始时间", prop: "startTime", type: "datetime", //类型为日期+时间 format: "yyyy-MM-dd HH:mm:ss", valueFormat: "yyyy-MM-dd HH:mm:ss", rules: [{ required: true, message: "请选择开始时间", trigger: "blur" }], }, 　// 时间范围类型： { label: "时间范围", prop: "Time", type: "datetimerange", searchRange: true,//开启范围搜索 format: "yyyy-MM-dd HH:mm:ss", valueFormat: "yyyy-MM-dd HH:mm:ss", rules: [{ required: true, message: "请选择时间范围", trigger: "blur" }], }, ``` #### 4.计数选择器 ```js { label: "权重", prop: "sort", type: 'number', //类型为数字 minRows: 0,//最小数字为0 tip: '只能填写数字，数字越大广告排序越前', //提示语 rules: [{ required: true, message: "请选择权重", trigger: "blur" }], }, ``` #### 5.单选框 ```js { label: "是否发布", prop: "isPublish", type:'radio', //类型为单选框 dicData: [ { label: "发布", value: 1 }, { label: "停用", value: 0 }, ], rules: [{ required: true, message: "请选择是否发布", trigger: "blur" }], }, ``` #### 6.上传图片框 ```js { label: "图片地址", prop: "photo", type:'upload', drag: true, //拖拽上传类型 action: '/api/blade-resource/file/upload',//上传路径 //返回数据结构体配置 propsHttp: { res: 'data', //返回结构体的层次 url:'url',//上传成功返回结构体的图片地址 home:'http://tzhb.zhisuaninfo.com/pic/' //图片的根路径地址 }, dataType: 'string',//正常是数组格式，添加这个属性就变成了string格式传给接口 data: { dir: 'paymentList'} , //指定上传参数 imgWidth:100, //图片宽度 imgHeight:100, //图片高度 listType:'picture-img', //图片列表类型 rules: [{ required: true, message: "请上传图片", trigger: "blur" }], }, ``` #### 7.多行文本域框 ```js { label: "label项目", prop: "projects", minRows: 5, //最小行/最小值 type: "textarea", //类型为多行文本域框 maxlength:500, 　//最大输入长度 }, ``` #### 8.级联选择器 ```js { label: "label系统", prop: "systemId", rules: [{ required: true, message: "请输入label系统", trigger: "blur" }], dicUrl: "/api/xxx/xxx/xxxTree",　//字典远程字典(填接口路径) type: 'cascader', //类型为：级联选择器 props: { label: "name", //远程字典接口对应显示字段 value: "id" //远程字典接口对应传值字段 }, filterable: true, //添加filterable属性即可启用搜索功能 checkStrictly: true,　 //可以选择任意一级 searchCheckStrictly:true, //可以选择任意一级(在搜索框中起作用) search:true, }, ``` #### 　9.子表单 ```js { label: "子表单内容", prop: "labelInfo", type: "labelmic", //类型为子表单(可新增删除) span: 24, labelPosition:'top', //子表单标题 children: { align: "center", column: [ { label: "label价格", prop: "labelprice", },{ label: "label编号", prop: "labelNum", hide:true }] } }, ``` #### 10.颜色控件 ```js { label: "主题颜色", prop: "color", type: 'color', value:"", 　　//默认值 disabled:true,　//是否禁用 colorFormat:"hex",　//颜色格式 showAlpha:false,　//颜色格式 predefine: [ '#ff4500', '#ff8c00', '#ffd700' ],　//预定义颜色 }, ``` #### 11.数组 ```js { label:'数组', prop:'array', dataType:'number', propsHttp:{ home:'http://demo.cssmoban.com', }, type:'array' } ``` #### 12.超链接 ```js { label:'超链接', prop:'href', type:'url' }, ``` #### 13.引入三方组件-富文本编辑器 ```js main.js注册全局引入： import avueUeditor from 'avue-plugin-ueditor'; Vue.component('AvueUeditor', avueUeditor); { label:'机构介绍', prop: "institutionIntroduce", component: 'AvueUeditor', options: { action: '/api/blade-resource/oss/endpoint/put-file', props: { res: "data", url: "link", } }, }, ``` ### avue组件自定义按钮/标题/内容/搜索栏 #### 一、自定义crud搜索栏组件 ```js column: [ 　　{ 　　　　showColumn: false, 　　　　label: "省份", 　　　　prop: "provinceCode", 　　　　type: "select", 　　　　search: true, //显示到search栏　　　　searchslot: true, //使用插槽　　}, ] ``` #### 二、自定义crud列表头部按钮 ```js **旧版本写法：** **新版本写法：** ``` 　　 #### 三、自定义crud操作栏按钮 ```js 旧版本写法：新版本写法： // 调出查看方法 handleView (row, index) { this.$refs.crud.rowView(row, index); }, // 调出编辑方法 handleEdit (row, index) { this.$refs.crud.rowEdit(row, index); }, // 调出删除方法 handleDel (row, index) { this.$refs.crud.rowDel(row, index); }, ``` 　 #### 四、自定义crud列表显示字段值和样式 ```js 旧版本写法：新版本写法： column: [ { label: "所属区域", prop: "pointId", slot: true, //插槽开启 }, ] ``` 　　 #### 五、自定义form表单标题 ```js 旧版本写法：新版本写法： column: [ { label: "材料", prop: "businessRegisterMaterial", type: "select", labelslot:true, //使用插槽 }, ] ``` #### 六、自定义form表单内容 ```js 旧版本写法：新版本写法： column: [ { label: "身份证", prop: "postIds", type: "select", formslot:true, //使用插槽 }, ] ``` #### 七、自定义form表单弹窗内底部按钮 ```js 旧版本写法：新版本写法： ``` ### AvueUI框架Crud下自定义内容 ```js ```