一、效果

二、功能實現
????1.顯示所有用戶信息

?????后端查詢所有用戶信息，前端axios請求獲取所有用戶信息的JSON字符數組，將獲取的信息放在一個allUsers的數組中，用于拉取所有信息（便于查詢之后，能夠再查詢回來）。再把信息賦給tableData(表格顯示的data)，最后再把此信息顯示方法放在mouted(){}中，一打開頁面便顯示。

后端代碼

//servicepublic JSONArray allUsers() throws IOException {UserMapper userMapper=connect().getMapper(UserMapper.class);List<User> list=userMapper.QueryAllUsers();JSONArray jsonArray=new JSONArray();jsonArray.addAll(list);return jsonArray;}//controller@RequestMapping("/allUsersInfo")@ResponseBody@CrossOriginpublic JSONArray allUsers() throws IOException {Connection connection=new Connection();return connection.allUsers();}

前端代碼

//拉取所有用戶信息showAllUsers(){this.$axios.post("/allUsersInfo").then( (response)=> {this.tableData=response.data;this.allUsers=response.data;this.pageTotal=Math.ceil(this.allUsers.length/5);console.log(this.pageTotal);}).catch(function (error) {console.log("獲取所有用戶信息失敗！")})},//表格<el-table:data="tableData"borderclass="table"ref="multipleTable"header-cell-class-name="table-header"max-height="400px"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column prop="id" label="ID" width="100" align="center"><template slot-scope="scope">{{scope.row.id}}</template></el-table-column><el-table-column prop="address" label="密碼"><template slot-scope="scope">{{scope.row.password}}</template></el-table-column><el-table-column prop="name" width="80" label="姓名"><template slot-scope="scope">{{scope.row.name}}</template></el-table-column><el-table-column prop="sex" width="45" label="性別"><template slot-scope="scope">{{scope.row.sex}}</template></el-table-column><el-table-column prop="birthday" width="120" label="出生日期"><template slot-scope="scope">{{scope.row.birthday}}</template></el-table-column><el-table-column label="所在部門"><template slot-scope="scope">{{scope.row.department}}</template></el-table-column><el-table-column label="健康狀態" align="center"><!-- <template slot-scope="scope">--><!-- <el-tag--><!-- :type="scope.row.state==='健康'?'success':(scope.row.state==='不健康'?'danger':'')"--><!-- >{{scope.row.state}}</el-tag>--><!-- </template>--><template slot-scope="scope">{{scope.row.status}}</template></el-table-column><el-table-column label="操作" width="180" align="center"><template slot-scope="scope"><el-buttontype="text"icon="el-icon-edit"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttontype="text"icon="el-icon-delete"class="red"@click="handleDelete(scope.$index, scope.row)">刪除</el-button></template></el-table-column></el-table>

????2.查詢用戶信息

????有了前面的基礎，就很簡單了。只需要一個簡單的邏輯分析即可，然后對allUsers進行查詢操作，tableData進行顯示?？紤]情況，(1)都為空時，查詢所有用戶信息（2）部門為空，姓名不空，查詢姓名匹配信息。。以此類推，代碼如下：

this.allUsers.find(item=>item.namename1&&item.departmentdepartment1)

this.tableData=[data];

handleSearch() {this.$axios.post("/allUsersInfo").then( (response)=> {let name1=document.getElementById('search').value;let department1=document.getElementById('department').valuelet data;if(name1!==""||department1!==""){if(name1==""&&department1!=="")//查找data = this.allUsers.find(item=>item.department==department1)else if(department1==""&&name1!=="")data = this.allUsers.find(item=>item.name==name1)else// (name1!==""&&department1!=="")data = this.allUsers.find(item=>item.name==name1&&item.department==department1)if(data == undefined){this.$message({showClose: true,message: 'no user'});}else{this.tableData=[data];//為什么要放在axios里面才有反應}} else {this.showAllUsers();}}).catch(function (error) {console.log("獲取所有用戶信息失敗！")})},

????3.錄入用戶信息

????使用一個dialog對話框，然后在里面進行一個表單設計用于采集信息（此處，作者踩了一個坑，廢了很多時間，，獲取前端數據，其中有個只獲取節點并未使用value ，因此報錯500,在后端查了很久，最后使用斷點調試，找到原因。），將信息交給后端（后端使用User接收即可），存入數據庫。由于后端代碼和1類似，就不寫了。放一下前端的。

<el-dialog title="錄入個人信息" :visible.sync="outerVisible" width="28%"><el-dialogwidth="30%"title="excel批量導入":visible.sync="innerVisible"append-to-body><el-uploadclass="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove"multiple:limit="3":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div></el-upload></el-dialog><!-- :label-width="formLabelWidth"--><el-form :model="form" style="margin-top: 0"><el-form-item label="工號" style="margin-top: 5px" ><el-input v-model="form.id" prefix-icon="el-icon-user" style="width: 200px;" id="employeeId"></el-input></el-form-item><el-form-item label="姓名" style="margin-top: 5px" ><el-input v-model="form.name" autocomplete="off" prefix-icon="el-icon-collection-tag" style="width: 200px" id="name2"></el-input></el-form-item><el-form-item label="性別" ><el-input v-model="form.sex" prefix-icon="el-icon-male" autocomplete="off" style="width: 200px" id="sex2"></el-input></el-form-item><el-form-item label="電話" ><el-input v-model="form.tel" prefix-icon="el-icon-phone" autocomplete="off" style="width: 200px" id="tel"></el-input></el-form-item><el-form-item label="部門"><el-select v-model="form.department" placeholder="請選擇部門" id="department2"><el-option label="人力資源部" value="shanghai"></el-option><el-option label="銷售部" value="beijing"></el-option></el-select></el-form-item><el-form-item style="width: 240px; display: inline"><div>出生日期</div><div class="block" style="display: inline"><el-date-pickerid="birthday"type="dates"v-model="value4"placeholder="選擇出生日期"></el-date-picker></div><div style="display: inline; margin-left: 20px"><el-button style="" @click="submmit">提交</el-button><div style="color: #97a8be">密碼默認：123456</div></div></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="outerVisible = false">取 消</el-button><el-button type="primary" @click="innerVisible = true">點擊文件上傳</el-button></div></el-dialog>//新增用戶submmit(){let employeeId0=document.getElementById("employeeId").value;let name0=document.getElementById("name2").value;let sex0=document.getElementById("sex2").value;let department0=document.getElementById("department2").value;let birthday0=document.getElementById("birthday").value;let password="123456"let tel0=document.getElementById("tel").value;let params=new URLSearchParams();params.append("id",employeeId0);params.append("name",name0);params.append("sex",sex0);params.append("tel",tel0);console.log(tel0);params.append("department",department0);params.append("password",password);params.append("birthday",birthday0);this.$axios.post("/newUser",params).then((res)=>{console.log(res.data)if(res.data){this.$message({message:"增添成功",type:"success"});}else {this.$message("此Id已注冊");}}).catch(function (error) {console.log("錯誤！！")})},

????4.刪除用戶

????注意index的使用（表示第行，用于刪除和拉取id以便后端進行刪除條件判斷）

// 刪除用戶handleDelete(index, row) { //index如何灌的？？// 二次確認刪除this.$confirm('確定要刪除嗎？', '提示', {type: 'warning'}).then(() => {console.log("id:"+this.tableData[index].id);let params=new URLSearchParams();params.append("id",this.tableData[index].id);this.$axios.post("/deleteUser",params).then((res)=>{if(res.data){this.$message.success('刪除成功');//記住}else{this.$message.warning('刪除失敗')}}).catch(function (error) {console.log("服務器連接異常！")})this.tableData.splice(index, 1);}).catch(() => {});},

總結

以上是生活随笔為你收集整理的【Vue学习-element-ui】用户信息列表的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。