<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入门的更多相关文章

  1. avue你繁琐的表格、表单、树等组件开发的解脱工具,了解一下?

    简介 Avue是基于Vue.js和element的快速开发框架 它的核心是数据驱动UI的思想,让我们从繁琐的crud开发中解脱出来,它的写法类似easyUI,但是写起来比easyui更容易,因为它是基 ...

  2. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  3. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  5. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  6. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  7. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  8. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  9. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  10. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. CLR、CLS、CTS概述

    在学习.NET的过程中,都会不可避免地接触到这三个概念,那么这三个东西是什么以及它们之间的关系是怎样的呢?任何编程语言,如果想要在.NET CLR上执行,就必需提供一个编译器,将此语言的程序编译成.N ...

  2. Vue+Go前端后端一体化 企业级微服务网关项目

    Vue+Go前端后端一体化 企业级微服务网关项目(~11) 课程目录: 第1章 拒绝培训机构烂大街项目,冲刺Offer首选[Vue+Go,稀缺组合,赶快上车!]1-1 摒弃千篇一律项目,选我:前后端一 ...

  3. AtCoder Regular Contest 151补题

    AtCoder Regular Contest 151 A. Equal Hamming Distances 简单题,注意下答案需要字典序最小即可 #include<bits/stdc++.h& ...

  4. JSP利用AJAX实现页面即时校验验证码

    在JSP页面实现验证码校验文章中当时是使用的Servlet类来进行的验证码校验,但是这种方式并不能即时校验,在正常情况下都是直接在用户输入之后就进行校验,这样对用户来说很方便的. AJAX 即&quo ...

  5. 探讨Morest在RESTful API测试的行业实践

    摘要:在本文中,我们将重点探讨使用自动化智能化Morest测试技术在RESTful API测试的行业实践. 本文分享自华为云社区<[智能化测试专题]华为云API智能测试工具--Morest测试框 ...

  6. 【Java SE进阶】Day02 Collection、Iterator、泛型

    一.Collection集合 1.概述 数组存元素,集合存对象(类型可以不一样) 2.框架分类 单列:Collection List ArrayList LinkedList Set HashSet ...

  7. Nmap扫描参数

    执行Nmap/nmap --help查看帮助文档,将显示Namp的用法及其功能Nmap的相关参数的含义与用法:扫描目标时用到的参数:-iL:从文件中导入目标主机或目标网段-iR:随意选择目标主机--e ...

  8. Jmeter 之跨线程传参

    其他线程使用某个线程中提取的值,比如场景:客户端一直与服务端保持连接的同时进行其他业务操作 1.建立以下两个线程组,并添加相应业务接口 2.发送心跳时,需要token,在用户登录接口下添加提取器提取t ...

  9. vue中mixins(混入)的用法

    vue中mixin的使用详解 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被&quo ...

  10. js任务队列EventLoop

    JS 执行机制 在我们学js 的时候都知道js 是单线程的如果是多线程的话会引发一个问题在同一时间同时操作DOM 一个增加一个删除JS就不知道到底要干嘛了,所以这个语言是单线程的但是随着HTML5到来 ...