前台
我们需要发送请求和带入参数
有了这两个属性过后需要在data中添加
这个属性是和方法平级的
整个页面
<template> <section> <!--工具条--> <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> <el-form :inline="true" :model="filters"> <el-form-item> <el-input v-model="filters.keywords" placeholder="关键字"></el-input> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="getEmployees">查询</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="handleAdd">新增</el-button> </el-form-item> </el-form> </el-col> <!--列表--> <el-table :data="employees" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="id" width="60" label="ID"> </el-table-column> <el-table-column prop="username" label="姓名" width="120" sortable> </el-table-column> <el-table-column prop="sn" label="员工编号" width="80" sortable> </el-table-column> <el-table-column prop="password" label="密码" width="280" sortable> </el-table-column> <el-table-column prop="headimg" label="头像" width="180" sortable> </el-table-column> <el-table-column prop="phone" label="电话" width="180" sortable> </el-table-column> <el-table-column prop="department" label="部门" width="180" sortable> </el-table-column> <el-table-column label="操作" width="150"> <template scope="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!--工具条 page-size为每页显示的条数--> <el-col :span="24" class="toolbar"> <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;"> </el-pagination> </el-col> <!--编辑界面--> <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false"> <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"> <el-form-item label="姓名" prop="username"> <el-input v-model="editForm.username" auto-complete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click.native="editFormVisible = false">取消</el-button> <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button> </div> </el-dialog> <!--新增界面--> <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false"> <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm"> <el-form-item label="姓名" prop="username"> <el-input v-model="addForm.username" auto-complete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click.native="addFormVisible = false">取消</el-button> <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button> </div> </el-dialog> </section> </template> <script> import util from '../../common/js/util' //import NProgress from 'nprogress' import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api'; export default { data() { return { filters: { keywords: '', }, employees: [], total: 0, page: 1, pageSize:5, listLoading: false, sels: [],//列表选中列 editFormVisible: false,//编辑界面是否显示 editLoading: false, editFormRules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ] }, //编辑界面数据 editForm: { username: '', }, addFormVisible: false,//新增界面是否显示 addLoading: false, addFormRules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ] }, //新增界面数据 addForm: { username: '', } } }, methods: { //性别显示转换 formatSex: function (row, column) { return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; }, handleCurrentChange(val) { this.page = val; this.getEmployees(); }, //获取用户列表 getEmployees() { let para = { page: this.page, pageSize:this.pageSize, keywords: this.filters.keywords }; this.listLoading = true; //NProgress.start(); //getUserListPage(para) this.$http.patch("/employee/query",para).then((res) => { this.total=res.data.total; this.employees = res.data.rows; this.listLoading=false; //NProgress.done(); }); }, //删除 handleDel: function (index, row) { this.$confirm('确认删除该记录吗?', '提示', { type: 'warning' }).then(() => { this.listLoading = true; //NProgress.start(); let para = { id: row.id }; //console.log(row.id); this.$http.delete('/employee/delete/'+para.id).then((res) => { this.listLoading = false; //NProgress.done(); this.$message({ message: '删除成功', type: 'success' }); this.getEmployees(); }); }).catch(() => { this.$message({ message: '删除失败', type: 'error' }); }); }, //显示编辑界面 handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); }, //显示新增界面 handleAdd: function () { this.addFormVisible = true; this.addForm = { username:'' }; }, //编辑 editSubmit: function () { this.$refs.editForm.validate((valid) => { if (valid) { this.$confirm('确认提交吗？', '提示', {}).then(() => { this.editLoading = true; //NProgress.start(); let para = Object.assign({}, this.editForm); // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); this.$http.put("/employee/update",para).then((res) => { this.editLoading = false; //NProgress.done(); this.$message({ message: '提交成功', type: 'success' }); this.$refs['editForm'].resetFields(); this.editFormVisible = false; this.getEmployees(); }); }); } }); }, //新增 addSubmit: function () { this.$refs.addForm.validate((valid) => { if (valid) { this.$confirm('确认提交吗？', '提示', {}).then(() => { this.addLoading = true; //NProgress.start(); let para = Object.assign({}, this.addForm); console.log(para); // para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd'); this.$http.post("/employee/add",para).then((res) => { this.addLoading = false; //NProgress.done(); this.$message({ message: '提交成功', type: 'success' }); this.$refs['addForm'].resetFields(); this.addFormVisible = false; this.getEmployees(); }); }); } }); }, selsChange: function (sels) { this.sels = sels; }, //批量删除 batchRemove: function () { var ids = this.sels.map(item => item.id).toString(); this.$confirm('确认删除选中记录吗？', '提示', { type: 'warning' }).then(() => { this.listLoading = true; //NProgress.start(); let para = { ids: ids }; batchRemoveUser(para).then((res) => { this.listLoading = false; //NProgress.done(); this.$message({ message: '删除成功', type: 'success' }); this.getEmployees(); }); }).catch(() => { }); } }, mounted() { this.getEmployees(); } } function pagination(index,size,list){ return list.slice((index-1)*size,index*size); } </script> <style scoped> </style>