新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （）来配合vue.js进行样式填充
之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js
下面就介绍一下vue.js应用在表格里的增删改查
首先引入一下element的js
<script src="https://www.jb51.net/plugins/element-ui/index.js"></script>
然后引入需要用到的vue相关的js文件
<script src="https://www.jb51.net/plugins/vue/vue.js"></script> <script src="https://www.jb51.net/plugins/vue/vue-resource.js"></script> <script src="https://www.jb51.net/plugins/vue/vue-moment.min.js"></script> <script src="https://www.jb51.net/js/jquery.min.js"></script>
下面先说一下html文件
<div> <!-- 操作 --> <ul> <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="拼命加载中..." @sort-change="tableSortChange" @selection-change="tableSelectionChange"> <el-table-column type="selection"> </el-table-column> <el-table-column sortable="custom" prop="username" label="用户名"> </el-table-column> <el-table-column prop="name" label="姓名"> </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="注册日期"> <div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div> </el-table-column> <el-table-column inline-template label="操作"> <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 :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
了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量
在methods进行我们的操作
vm = new Vue({ el: '#user', data:{}, methods:{} })
首先 我们先从读取数据开始
放入你的url
users是表格绑定的数组 也是存放从后台获取的数据
将需要显示的数据放在filter中
vm = new Vue({ el: '#user', // 数据模型 data: function() { return { url: 'url', users: [], filter: { per_page: 10, // 页大小 page: 1, // 当前页 name:'', username:'', phone:'', is_active:'', sorts:'' }, total_rows: 0, loading: true, }; }, methods:{} })
接下来我们添加methods
pageSizeChange() 以及 pageCurrentChange()是用于分页的函数
在query() 是用于搜索的项目
getUsers() 就是用于获取数据
methods: { pageSizeChange(val) { this.filter.per_page = val; this.getUsers(); }, pageCurrentChange(val) { this.filter.page = val; this.getUsers(); }, query(){ this.filter.name=''; this.filter.username=''; this.filter.phone=''; this.filter[this.select]=this.keywords; this.getUsers(); }, // 获取用户列表 getUsers() { this.loading = true; var resource = this.$resource(this.url); resource.query(this.filter) .then((response) => { this.users = response.data.datas; this.total_rows = response.data.total_rows; this.loading = false; }) .catch((response)=> { this.$message.error('错了哦，这是一条错误消息'); this.loading = false; }); }, }
读取完数据之后 我们可以看见数据是按照每页十条显示 是上面我们默认设置的
下面进行删除操作 删除我设置的是单挑删除以及多条删除
因为删除需要选中 所以我们需要加入选中的变量
vm = new Vue({ el: '#user', // 数据模型 data: function() { return { url: 'http://172.10.0.201/api/v1/accounts', users: [ ], filter: { per_page: 10, // 页大小 page: 1, // 当前页 name:'', username:'', phone:'', is_active:'', sorts:'' }, total_rows: 0, loading: true, selected: [], //已选择项 }; },
然后在methods也要加入选中的函数
tableSelectionChange(val) { console.log(val); this.selected = val; },