前言
Avue的v2版本是一个基于element-ui低代码前端框架，Avue的v3是一个基于element-plus低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。avue对于后台管理系统的开发极其便捷，就是配置不容易记住，熟练该框架配置来开发会好点，不然真不如直接用element来开发的好，以下以v2为例。
安装
npm、yarn安装
npm i @smallwei/avue -S
yarn add @smallwei/avue -S
或
CDN在线安装
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css"/>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<!-- 引入相关JS 文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js"></script>引入
通过CDN安装的，会挂载在全局属性AVUE下，通过 Vue.use(AVUE) 注册。
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);全局配置
Vue.use(AVUE,{
size:'', // 组件的尺寸，默认small。可选值 small/mini/medium
tableSize:'', //
formSize:'', //
appendToBody:true, //
modalAppendToBody:true, //
menuType:'', // 用于改变操作栏菜单按钮类型性，属性的组件的默认尺寸均为 text。可选值 button/icon/text/menu
qiniu:{ // 七牛云配置
AK: '',
SK: '',
scope: '',
url: '',
deadline: 1
},
ali:{ // 阿里云配置
region: '',
endpoint: '',
accessKeyId: '',
accessKeySecret: '',
bucket: '',
},
theme:'', // 主题颜色配置，属性的组件的默认白色。可选值 dark
canvas:{ // 水印配置
text: 'avuejs.com',
fontFamily: 'microsoft yahei',
color: "#999",
fontSize: 16,
opacity: 100,
bottom: 10,
right: 10,
ratio: 1
},
});国际化
Avue 采用中文作为默认语言，同时支持多语言切换
import Vue from 'vue'
import Avue from '@smallwei/avue'
import zhLocale from '@smallwei/avue/lib/locale/lang/zh'
import enLocale from '@smallwei/avue/lib/locale/lang/en'
Vue.use(Avue, { enLocale })全局api
$DialogForm弹窗表单
$Clipboard复制到剪切板
$ImagePreview图片预览
$Print 打印插件
$Export excel导出
watermark全局水印
downFile文件下载
deepClone对象深拷贝
validatenull判断空
findNode数组中寻找对象
findArray数组中寻找对象下标
crud 配置项 option
crud 表格回调函数事件
on-load：这个事件会在表格所在的组件加载时就会执行，初始化表格数据。当表格翻页、页码变化时候也会自动执行该方法，使用了这个方法可以省略表格的current-change 、size-change两个回调函数。
current-change：表格页码发生变化时触发，第一个参数为当前页码。
size-change：表格页容量变化时触发，第一个参数就是当前页容量大小。
search-change ：表格查询按钮回调函数，默认有两个参数 form与done， form为搜索框的值，done为关闭搜索的刷新状态回调函数。
row-save ：表格新增表单确定按钮的回调函数，默认有三个参数分别为：row（表单的值），done（用于关闭表单回调函数），loading（页面loading状态） 。
row-update ：表格行编辑确定按钮的回调，默认四个参数 row（当前行），index（索引），done（关闭弹框回调函数），loading（页面loading状态）。
row-del：表格操作行删除按钮回调函数，默认两个参数，row（当前行数据），index（当前索引） 。
refresh-change：表格的刷新按钮回调函数。
current-row-change：当前表格行被点击时的回调函数，第一个参数是当前行数据。
tree-load：表格行展开的懒加载回调，带三个参数 row（当前展开行的数据），treeNode（展开行节点数据），resolve（行懒加载的成功回调函数，在resolve里面将懒加载的数据传出去表格进行渲染）。
before-close：打开前的回调函数，两个参数done（用于关闭Dialog），type（当前窗口类型）。
before-close：关闭前的回调函数，done（用于关闭Dialog），type（当前窗口的类型）。
search-reset：点击清空按钮触发，清空搜索框回调函数。
selection-change：当表格选择项勾选发生变化时会触发该回调函数。文章来源：https://www.toymoban.com/news/detail-790970.html
dateChange：dateBtn为true时的选择日期回调函数。文章来源地址https://www.toymoban.com/news/detail-790970.html
<avue-crud
ref="crud"
data="data" // 表格显示的数据
:option="option" // 表格配置项
:page.sync="page"
:permission="permission" // 表格按钮权限控制
@on-load="onLoad"
@current-change="currentChange"
@size-change="pageSizeChange"
@search-change="searchChange"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
@refresh-change="refreshChange"
@current-row-change="handleCurrentRowChange"
@tree-load="treeLoad"
@before-open="beforeOpen"
@before-close="beforeClose"
@search-reset="searchReset"
/>const option = {
'table-loading':'', // 表格等待框的控制
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:'', // 列固定
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'},
],
rules:[ // 表单字段校验规则
{equired: true,message: "请输入姓名",trigger: "blur"},
],
hide: false, // 隐藏列
}
],
};自定义内容
<avue-crud :data="data" :option="option" ref="crud">
<!-- 左边插槽 -->
<template slot-scope="scope" slot="menuLeft">
<el-button type="danger" @click="$refs.crud.rowAdd()">新增</el-button>
</template>
<!-- 右边插槽 -->
<template slot-scope="scope" slot="menuRight">
<el-button type="danger" @click=() => {}">刷新</el-button>
</template>
<!-- 自定义行内操作栏插槽 -->
<template slot-scope="{row,index}" slot="menu">
<el-button @click="$refs.crud.rowEdit(row,index)">编辑</el-button>
<el-button @click="$refs.crud.rowDel(row,index)">删除</el-button>
</template>
<!-- 自定义弹窗内按钮插槽 -->
<template slot-scope="{row,index,type}" slot="menuForm">
<el-button v-if="type=='add'" @click="$refs.crud.rowSave()">自定义新增</el-button>
<el-button v-if="type=='edit'" @click="$refs.crud.rowUpdate()>自定义修改</el-button>
<el-button @click="$refs.crud.closeDialog()">取消</el-button>
</template>
<!-- 自定义表单插槽，slot="propForm" -->
<template slot-scope="{type,disabled}" slot="nameForm"> // column: [{prop:'name',formslot:true}]
<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-tag>{{user.name?user.name:'暂时没有内容'}}</el-tag>
<el-input :disabled="disabled" v-model="user.name"></el-input>
</template>
<!-- 自定义表单错误提示插槽，slot="propError" -->
<template slot-scope="{error}" slot="nameError"> // column: [{prop:'name',labelslot:true}]
<p style="color:green">自定义提示{{error}}</p>
</template>
<!-- 自定义表单标题，slot="propLabel" -->
<template slot-scope="scope" slot="nameLabel"> // column: [{prop:'name',errorslot:true}]
<span>姓名 </span>
<el-tooltip class="item" effect="dark" content="文字提示" placement="top-start">
<i class="el-icon-warning"></i>
</el-tooltip>
</template>
<!-- 向搜索表单插入一个额外的（column中没有的字段）输入框 -->
<template slot="search">
<el-form-item label="状态">
<el-input placeholder="状态" v-model="search.value"/>
</el-form-item>
</template>
<!-- 向表单中插入一个额外的输入框 -->
<template slot="menuForm">
<el-form-item label="维修">
<el-input placeholder="维修" v-model="search.value"/>
</el-form-item>
</template>
</avue-crud>到了这里，关于Avue-crud 常用方法、属性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
