vue.js+Element实现表格里的增删改查

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充

之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js

下面就介绍一下vue.js应用在表格里的增删改查

首先引入一下element的js

<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"> <el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button> <el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button> </el-table-column> </el-table> <!--分页begin--> <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> <!--分页end--></div>

这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到，然后我们就开始引入js