一、安装
通过 npm 安装
在现有项目中使用 Avue 时,可以通过 npm 或 yarn 进行安装(需要先引入ElementUI作为依赖支持):
npm i @smallwei/avue -S
yarn add @smallwei/avue -S
//需要先安装ElementUI的依赖
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(ElementUI)
Vue.use(Avue);
使用字典需要引入axios
import axios from 'axios'
Vue.use(Avue,{axios})
//老版本需要使用如下
//main.js
window.axios = axios
通过脚手架安装
在新项目中使用 Avue 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Avue
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create hello-world
# 创建完成后,可以通过命令打开图形化界面,如下图所示
vue ui
在图形化界面中,点击 依赖 -> 安装依赖,然后将 @smallwei/avue 添加到依赖中即可。
二、使用
<template>
<!-- 基础组件 -->
<basic-container>
<!-- <el-button @click='exportHandle'>导出</el-button> -->
<avue-crud
//设置表格属性
:option="option"
//来存取页面的值
v-model="form"
//获取后台数据
:data="data"
:table-loading="loading"
//分页
:page="page"
//权限控制 操作按钮动态显示
:permission="permissionList"
//打开前回调
:before-open="beforeOpen"
// 关闭前回调
:before-close="beforeClose"
//获取dom 结构
ref="crud"
//数据编辑后出发
@row-update="rowUpdate"
//新增数据确定后执行
@row-save="rowSave"
// 行删除
@row-del="rowDel"
//点击搜索后触发该事件
@search-change="searchChange"
//清空搜索回调方法
@search-reset="searchReset"
//当选择项发生变化时会触发该事件
@selection-change="selectionChange"
@current-change="currentChange"
//点击每页多少条
@size-change="sizeChange"
//点击刷新
@refresh-change="onLoad(page)"
//初始化页面
@on-load="onLoad"
>
//自定义按钮
<template slot-scope="scope" slot="menu">
<el-button @click="submitHandle(scope.row)">提交</el-button >
</template>
<template slot-scope="{ row }" slot="status">
//更改表格内容
<el-tag v-if="row.status == 0">待审</el-tag>
<el-tag v-else-if="row.status == 1" type="info">审批中</el-tag>
</template>
</avue-crud>
</basic-container>
</template>
<script>
export default {
data() {
return {
form: {},
type: "",
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
selectionList: [],
option: {
//列的对其方式
align:'left',
//表格宽度
width: '100%',
//表格高度差(主要用于减去其他部分让表格高度自适应)
calcHeight: 'auto',
//表格高度
height: 'auto',
//表格最大高度
maxHeight: 'auto',
// 弹框文字提示
tip: false,
// 边框
border: true,
// 显示序号
index: true,
// 序号标题
indexLabel: "序号",
//打印按钮
printBtn: true
// 刷新按钮
refreshBtn: true
// 查看按钮
viewBtn: true,
// 行内编辑按钮
editBtn: false,
// 行内删除
delBtn: false,
//首次加载是否显示搜索
searchShow: true,
editBtnText:'编辑文案',
viewBtnText:'查看文案',
printBtnText:'打印文案',
excelBtnText:'导出文案',
updateBtnText:'修改文案',
saveBtnText:'保存文案',
cancelBtnText:'取消文案',
//弹框宽度控制
dialogWidth: 600,
column: [
{
label: "请假人",
//匹配后端字段
prop: "userId",
//输入框状态控制 默认为input
type: "tree",
//type:input/input/select/radio/checkbox/textarea/cascader/date/time/datetime
/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree/number
maxRows:4,//最大行(当type为textarea,当number时最大值)
minRows:2,//最小行(当type为textarea,当number时最小值)
// 搜索栏目自定义内容 同时控制页面显示隐藏
search: true,
//表单编辑时是否禁止输入
editDisabled: true,
//表单新增时是否禁止输入
addDisabled: true,
//隐藏显示当前项
display: false,
// 表单新增是可见
addDisplay: false,
// 表单查看是否可见
viewDisplay: true,
// 编辑按钮是否可见
editDisplay: false,
// 隐藏列
hide: true,
//选着多个 当type为tree生效
multiple: true,
// 传入静态字典
dicData: [],
// 字典参数 props 匹配后台字段
props: {
value: "sysId",
label: "name",
},
//字典地址
dicUrl: "/api/blade-system/dict/dictionary?code=exam_state",
//时间格式
format: "yyyy-MM-dd hh:mm:ss",
valueFormat: "yyyy-MM-dd hh:mm:ss",
//验证
rules: [
{
required: true,
message: "请选择请假人",
trigger: "blur",
},
],
},
data: []
};
},
mounted() {
// 当字典数据需要前端转换时 获取请假人id 通过接口 添加字典数据
personnel(1, 10000, {
is_deleted: 0,
}).then((res) => {
this.option.column.forEach((item) => {
if (item.prop == "userId") {
item.dicData = res.data.data.records;
}
});
});
},
methods: {
onLoad(page, params = {}) {
this.loading = true
getList(
page.currentPage,
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
//渲染数据
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
});
},
},
};
</script>
<style>
</style>
三、全局api
1.$DialogForm弹窗表单
this.$DialogForm.show({
title: '弹窗页面',
width: '30%',
menuPosition:'right',
option:{
submitText: '完成',
span:24,
column: [{
label: "姓名",
prop: "name",
rules: [{
required: true,
message: "请输入姓名",
trigger: "blur"
}],
}]
},
beforeClose: (done) => {
this.$message.success('关闭前方法')
done()
},
callback:(res)=>{
console.log(res.data);
this.$message.success('关闭等待框')
setTimeout(() => {
res.done()
setTimeout(() => {
this.$message.success('关闭弹窗')
res.close()
}, 1000)
}, 1000)
}
})
2.$Clipboard复制到剪切板
this.$Clipboard({
text: '复制的文本内容'
}).then(() => {
this.$message.success('复制成功')
}).catch(() => {
this.$message.error('复制失败')
});
3.$ImagePreview图片预览
data() {
var link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
return {
datas: [
{ thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
{ thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
{ thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` },
]
}
}
this.$ImagePreview(this.datas, index);
3.$Print 打印插件
<div id="test"></div>
this.$Print('#test')
4.$Export excel导出
let opt = {
title: '文档标题',
column: [{
label: '标题',
prop: 'title'
}],
data: [{
title: "测试数据1"
}, {
title: "测试数据2"
}]
}
this.$Export.excel({
title: opt.title || new Date().getTime(),
columns: opt.column,
data: opt.data
});
5.$Log日志打印
/**
* 内置5中常用颜色,默认为primary
* default:#35495E
* primary:#3488ff
* success:#43B883
* warning:#e6a23c
* danger:#f56c6c
* 也可以直接打印彩色文字
*/
this.$Log.capsule('标题','内容','primary')
this.$Log.primary('内容')
6.findObject发现结构对象
var option = {column:[]}
var prop = this.findObject(option.column,'prop');
console.log(prop)//操作对象
7.watermark全局水印
this.watermark({
fontSize: '14px',
width: '100',
height: '80',
text: 'avue局部水印'
});
8.downFile文件下载
var url = "https://avuejs.com/images/logo-bg.jpg";
this.downFile(url,'logo.jpg');
9.randomId随机数生成
var str = this.randomId();
console.log(str)
10.loadScript动态加载js/css
this.loadScript('js','xxx.js').then(()=>{
//执行后的方法
})
this.loadScript('css','xxx.css').then(()=>{
//执行后的方法
})
11.deepClone对象深拷贝
var obj1 = {
name:'张三'
}
var obj2 = this.deepClone(obj1);
12.setPx设置css像素方法
var obj = 23
console.log(this.setPx(obj)) //'23px'
console.log(this.setPx('100%')) //'100%'
console.log(this.setPx('23px')) //'23px'
13.validatenull判断空
var obj1 = {}
var obj2 = []
var str1 = ''
var str2 = undefined
var str3 = null;
console.log(this.validatenull(obj1)) //true
console.log(this.validatenull(obj2)) //true
console.log(this.validatenull(str1)) //true
console.log(this.validatenull(str2)) //true
console.log(this.validatenull(str3)) //true
14.findNode数组中寻找对象下标
var list = [{
prop:'name'
},{
prop:'sex'
}]
var obj = this.findNode(list,'sex','prop');
console.log(obj) //{prop:'sex'}
15.vaildData验证对象
var obj = {}
console.log(this.vaildData(obj,'默认值')) //默认值
console.log(this.vaildData(obj,{name:11})) //{name:11}
var obj2 = true
console.log(this.vaildData(obj2,false)) //true
16.表格合计
//option中设置显示汇总信息
option:{
showSummary:true,
}
//avue-crud标签中绑定计算方法 :summary-method="getSummaries"
<avue-crud ref="crud" :page="page" :data="dataList" :option="option" @search-change="searchChange" @on-load="getDataList" @refresh-change="getDataList"
:summary-method="getSummaries">
</avue-crud>
//methods调用合计方法
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map((item) => Number(item[column.property]));
//指定----求和,其余列均不求和
if (column.property == 'id' || column.property == 'name') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);//转变为数字类型
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
} else {
sums[index] = '-';//不汇总列加-
}
});
return sums;
},
点击跳转Avue官方文档,查看更多详细内容。如有其他疑问可在评论区留言...
感觉还可以的请点赞、收藏、关注,谢谢您的观看