Open dounai1306 opened 6 years ago
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue增删改查</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="SHORTCUT ICON" href=img/icon.ico type=image/x-icon> <style> body,html{ margin: 0; padding: 0 } [v-cloak] { display: none !important; } </style> </head> <body> <div id="app" v-cloak> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">LOGO</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">app调用量</a></li> </ul> </div> </div> </nav> <div class="container" style="margin-top: 70px"> <div class="clearfix"> <input placeholder="模糊查询" class="form-control pull-left" style="width: 200px;" v-model="filterKeys"> <el-button size="small" type="primary" @click="handleAdd()" class="pull-right">新增配置</el-button> </div> <el-table :data="tableData" style="width: 100%;margin-top: 20px;"> <el-table-column type="index" width="50"></el-table-column> <el-table-column prop="appid" label="appid" sortable></el-table-column> <el-table-column prop="user" label="申请人" sortable></el-table-column> <el-table-column prop="department" label="申请部门" sortable></el-table-column> <el-table-column prop="email" label="邮箱" sortable></el-table-column> <el-table-column prop="count" label="每天调用量" sortable></el-table-column> <el-table-column prop="appid" label="操作"> <template slot-scope="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row.appid)">删除</el-button> </template> </el-table-column> </el-table> </div> <el-dialog :title="title" :visible.sync="dialogVisible" size="tiny"> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="appid"><el-input v-model="form.appid"></el-input></el-form-item> <el-form-item label="申请人"><el-input v-model="form.user"></el-input></el-form-item> <el-form-item label="申请部门"><el-input v-model="form.department"></el-input></el-form-item> <el-form-item label="邮箱"><el-input v-model="form.email"></el-input></el-form-item> <el-form-item label="每天调用量"> <el-input-number v-model="form.count" :min="0" style="width:100%"></el-input-number> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="handleSave">确 定</el-button> </span> </el-dialog> </div> </body> <script src="js/vue.js"></script> <script src="js/index.js"></script> <script src="js/vue-resource@1.3.4"></script> <script> new Vue({ el: '#app', data: function() { return { dialogVisible: false, tableDataBak: [], filterKeys: '', form: { appid: '', user: '', department: '', email: '', count: '' }, title: '新增', url: 'http://10.32.11.20:5388/apply' } }, created: function () { this.getData() }, methods: { getData: function () { var that = this; this.$http.get(that.url, null).then(function (res) { if (res.data.result) { var data = res.data.data var dataList = [] for (var x in data) { dataList.push({ "appid": x, "department" : data[x].department, "count" : data[x].count, "user" : data[x].user, "email" : data[x].email }) } that.tableDataBak = dataList } else { that.$message({message: '加载失败' + res.data.msg, type: 'error'}); } }, function (res) { that.$message({message: '接口异常', type: 'error'}); }); }, handleAdd: function () { this.form = { appid: '', user: '', department: '', email: '', count: '' } this.dialogVisible = true }, handleSave: function () { var that = this; this.$http.post(that.url, that.form).then(function (res) { if (res.data.result) { that.dialogVisible = false that.$message({message: '操作成功', type: 'success'}); that.getData() } else { that.$message({message: '加载失败' + res.data.msg, type: 'error'}); } }, function (res) { that.$message({message: '接口异常', type: 'error'}); }); }, handleEdit: function (item) { this.form = JSON.parse(JSON.stringify(item)); this.dialogVisible = true }, handleDelete: function (idx) { var that = this; this.$confirm('确定要删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(function () { that.$http.delete(that.url + '?appid=' + idx).then(function (res) { if (res.data.result) { that.$message({message: '操作成功', type: 'success'}); that.getData() } else { that.$message({message: '操作失败', type: 'error'}); } }) }) } }, computed: { tableData: function() { var search = this.filterKeys; if (search) { return this.tableDataBak.filter(function(data) { return Object.keys(data).some(function(key) { return String(data[key]).toLowerCase().indexOf(search) > -1 }) }) } return this.tableDataBak; } } }) </script> </html>
前端模糊查询是使用vue的computed,大概的思路是复制一份数据,进行实时计算,return回的数据绑定在table上
这一块是vue+vueResource+elementUi实现一个简单的增删改查 http的一些方法未封装