avue的使用
最近做的项目中接触到了一个新的框架感觉很好用所以推荐给大家~~
【简介】
Avue.js是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。
官网地址：https://avuejs.com/
github地址：https://github.com/nmxiaowei/avue
这个简直太好用了，一套crud只需要一行代码就解决啦
1、【npm安装】
npm i @smallwei/avue -S
1
在min.js页面引入下方代码
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
1
2
3
这里提醒大家一下不要忘记安装 element-ui【官网地址】
【cdn方式】
//在index.html引入avuex的包
avue.min.js为压缩混淆包
avue.js为没有压缩混淆的包
<link rel="stylesheet" href="/lib/index.css" />
<script src="/lib/avue.min.js"></script>
//在main.js中使用
Vue.use(window.AVUE);
1
2
3
4
5
6
7
8
下面是一个简单地crud
<template>
<div>
<avue-crud :data="data" :option="option" v-model="obj"
@row-del="rowDel" @row-save="handleRowSave"
@row-update="handleRowUpdate"></avue-crud>
</div>
</template>
<script>
export default {
data() {
return {
obj:{},
data: [{
name:'张三',
sex:'男',
date:'1994-02-23 00:00:00'
}, {
name:'李四',
sex:'女',
date:'1994-02-23 00:00:00'
}, {
name:'王五',
sex:'女',
date:'1994-02-23 00:00:00'
}, {
name:'赵六',
sex:'男',
date:'1994-02-23 00:00:00'
}],
option:{
title:'表格的标题',
page:false,
align:'center',
menuAlign:'center',
column:[
{
label:'姓名',
prop:'name'
},
{
label:'性别',
prop:'sex'
},{
label: "日期",
prop: "date",
type: "date",
format: "yyyy-MM-dd hh:mm:ss",
valueFormat: "yyyy-MM-dd hh:mm:ss",
}
]
}
}
},
methods: {
// 增加按钮
handleRowSave(row,done,loading) {
this.data.splice(0, 0, row);
done(); // 关闭表单
loading(); // 按钮停止加载
},
// 修改按钮
handleRowUpdate(row,index,done,loading) {
this.data.splice(index, 1, row);
done(); // 关闭表单
loading(); // 按钮停止加载
},
// 删除按钮
rowDel(row, index) {
this.$confirm('是否删除该条信息？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.data.splice(index, 1);
});
},
},
}
</script>
