vue.js+ element 增删改查
Posted 牵只蜗牛去散步!
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js+ element 增删改查相关的知识,希望对你有一定的参考价值。
文章出处:http://blog.csdn.net/janessssss/article/details/53288073?locationNum=14&fps=1
新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充
之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js
下面就介绍一下vue.js应用在表格里的增删改查
首先引入一下element的css以及js
<link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css">
<script src="plugins/element-ui/index.js"></script>
然后引入需要用到的vue相关的js文件
<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>
下面先说一下html文件
<div id="user">
<ul class="btn-edit fr">
<li >
<el-button type="primary" @click="dialogCreateVisible = true">添加用户</el-button>
<el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" >删除</el-button>
<el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>
<el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>
</li>
</ul>
<el-table :data="users"
stripe
v-loading="loading"
element-loading-text="拼命加载中..."
style="width: 100%"
height="443"
@sort-change="tableSortChange"
@selection-change="tableSelectionChange">
<el-table-column type="selection"
width="60">
</el-table-column>
<el-table-column sortable="custom" prop="username"
label="用户名"
width="120">
</el-table-column>
<el-table-column prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column prop="phone"
label="手机"
>
</el-table-column>
<el-table-column prop="email"
label="邮箱">
</el-table-column>
<el-table-column prop="create_time" sortable="custom" inline-template
label="注册日期"
width="260">
<div> row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')</div>
</el-table-column>
<el-table-column inline-template
label="操作"
width="250">
<span>
<el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>
<el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>
</span>
</el-table-column>
</el-table>
<el-pagination class="tc mg"
:current-page="filter.page"
:page-sizes="[10, 20, 50, 100]"
:page-size="filter.per_page"
layout="total, sizes, prev, pager, next, jumper"
:total="total_rows"
@size-change="pageSizeChange"
@current-change="pageCurrentChange">
</el-pagination>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到
然后我们就开始引入js
了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量
在methods进行我们的操作
vm = new Vue(
el: '#user',
data:,
methods:
)
首先 我们先从读取数据开始
放入你的url
users是表格绑定的数组 也是存放从后台获取的数据
将需要显示的数据放在filter中
vm = new Vue(
el: '#user',
data: function()
vue成就购物城的功能 (展示增删改查)
python XML ElementTree的增删改查
python实现单链表的增删改查
python实现单链表的增删改查
vue.js带复选框表单的增删改差
用 Vue 实现学生信息管理系统的增删改查操作,模拟数据库操作(但并没有连接数据库)