avue入门
<html> <head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.js"></script>
</head> <body>
<div id="app">
<avue-crud :data="data" :option="option" @row-update="rowUpdate"></avue-crud>
</br>
<el-tag>当前弹出框表单中的数据{{obj}}</el-tag>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
rowUpdate(form, index, done, loading) {
console.log(111);
}
},
data: function () {
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',
delBtn: false,
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",
}
]
}
}
}
})
</script> </html>
<html> <head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.js"></script>
</head> <body>
<div id="app">
<avue-crud :data="data" :option="option" @row-update="rowUpdate"></avue-crud>
</br>
<el-tag>当前弹出框表单中的数据{{obj}}</el-tag>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
rowUpdate(form, index, done, loading) {
console.log(111);
}
},
data: function () {
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',
delBtn: false,
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",
}
]
}
}
}
})
</script> </html>
avue入门的更多相关文章
- avue你繁琐的表格、表单、树等组件开发的解脱工具，了解一下？
简介 Avue是基于Vue.js和element的快速开发框架 它的核心是数据驱动UI的思想,让我们从繁琐的crud开发中解脱出来,它的写法类似easyUI,但是写起来比easyui更容易,因为它是基 ...
- Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Oracle分析函数入门
一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- 2021-2022 ICPC, NERC, Northern Eurasia Onsite (Unrated, Online Mirror, ICPC Rules, Teams Preferred) J. Job Lookup
题意 n个节点,n<=200,你需要构造这n个几点成为一棵树,并且这棵树的中序遍历为1-n; 你构造树的节点之间的最短路构成一个n×n的最短距离矩阵d: 同时给你n×n的权重矩阵c:最最小的Σd ...
- Training: Get Sourced
原题链接:http://www.wechall.net/challenge/training/get_sourced/index.php 提示告诉我们答案就藏在这个界面中,使用View Sourcec ...
- (GCC) gcc编译选项 -Wl, -start-group，whole-archive，-Wl, Bstatic
1. start-group 编译选项 假设程序x依赖三个静态库:libX1.a.libX2.a和libX3.a,而libX2.a又依赖libX1.a,libX3.a依赖libX2.a和libX1.a ...
- Kafka事务原理剖析
一.事务概览 提起事务,我们第一印象可能就是ACID,需要满足原子性.一致性.事务隔离级别等概念,那kafka的事务能做到什么程度呢?我们首先看一下如何使用事务 Producer端代码如下 Kafka ...
- 关于 .NET 在不同操作系统中 IO 文件路径拼接方法结升级 .NET 7 后注意到的一个小坑
.NET 现在支持跨平台这件事情已经是众所周知的特点了,虽然平台整体支持跨平台了,但是我们的代码如果真的想要实现跨平台运行其实还是有些小细节要注意的,今天想要记录分享的就是关于 文件I/O操作时路径的 ...
- windows使用pyinstaller 打包sklearn模块出现死循环报错
前言 解决这个让我花费了很长时间, 我这里说的死循环,不是正常通过 --hidden-import能解决的问题. 因为我也查询了很多资料 但是无一例外都失败了(能通过 –hidden-import 解 ...
- crtl+鼠标左键代码出现class file editor，source not found
点击Attached source或者已经添加过按钮变成Change Attached Source 点击之后将自己jdk路径下的src.zip导入就可以了 图片来自https://blog.csdn ...
- 【Linux】通过Crontab和shell脚本实现定期备份和删除PG数据库表数据
〇.参考资料 一.Crontab使用 1.查看状态 service crond status 2.新建crontab任务 crontab -e 输入字符串 * * * * * cd /home/big ...
- Java 中 String 与 StringBuffer 和 StringBuilder 的区别
简介: String 是 Java 中很常用的类之一,同时,字符串是 Java 面试中最重要的话题之一. StringBuffer 和 StringBuilder 类提供了操作字符串的方法. 我们将研 ...
- 1分钟理清楚C++类模板和模板类区别
1.定义区别 类模板和模板类主要关注点是后一个单词. 类模板:主要描述的是模板,这个模板是类的模板.可以理解为一个通用的类,这个类中的数据成员,成员函数的形参类型以及成员函数的返回值类型不用具体的指定 ...