因為需求發(fā)生了點變化，所以把之前的代碼稍改一下，把之前的信息列表全復(fù)制到用戶列表中，最后效果一樣。UserList.vue

<template><div class="UserList"><!-- 查詢、重置 --><el-form :inline="true" :model="formInline" class="demo-form-inline" size="small"><el-form-item label="姓名"><el-input v-model="formInline.name" placeholder="請輸入姓名"></el-input></el-form-item><el-form-item><el-button type="primary" @click="find()">查詢</el-button></el-form-item><el-form-item><el-button type="danger" @click="refresh()">刷新</el-button></el-form-item></el-form><!-- <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> --><el-table:data="compData"height="450"borderstyle="width: 100%":default-sort="{ prop: 'number', order: 'Ascending' }"><!-- <el-table-column prop="id" label="序號" align="center"></el-table-column> --><el-table-column type="selection" width="55"> </el-table-column><el-table-column prop="number" label="學(xué)號" align="center" sortable></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="sex_text" label="性別" align="center"></el-table-column><el-table-column prop="age" label="年齡" align="center" sortable></el-table-column><el-table-column prop="class" label="班級" align="center"></el-table-column><el-table-column prop="state_text" label="狀態(tài)" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column prop="phone" label="聯(lián)系方式" align="center"></el-table-column><el-table-column fixed="right" label="操作" align="center"><template slot-scope="scope"><el-button@click="del(scope.row)"icon="el-icon-delete"type="danger"size="mini"circle></el-button><el-buttontype="primary"icon="el-icon-edit"size="mini"circle></el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 30, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div> </template><script> import { Info, InfoDel } from "@/api/api.js"; export default {data() {return {tableData: [],currentPage: 1, //當(dāng)前頁數(shù)pageSize: 10, //每頁顯示條數(shù)total: 0,formInline: {name: ''}};},created() {this.getData();},computed: {compData() {return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);},},methods: {find(){this.getData(this.formInline)},refresh(){this.formInline = {}this.getData(this.formInline)},handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},handleCurrentChange(val) {this.currentPage = val;},getData(params) {Info(params).then((res) => {console.log(res.data);if (res.data.status === 200) {this.total = res.data.total;this.tableData = res.data.data;this.tableData.forEach((item) => {item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");item.state === "1"? (item.state_text = "已入校"): item.state === "2"? (item.state_text = "未入校"): (item.state_text = "休學(xué)中");});}});},del(row) {console.log(row);InfoDel(row.id).then((res) => {if (res.data.status === 200) {this.$message({ message: res.data.message, type: "success" });this.getData();}});},}, }; </script><style lang="scss"> .UserList {.demo-form-inline {text-align: left;}.el-pagination {text-align: left;margin-top: 20x;} } </style>

調(diào)整一下頁面元素布局和樣式：按鈕、圖標(biāo)等。調(diào)整后

UserList.vue

<template><div class="UserList"><!-- 查詢、重置 --><el-form:inline="true":model="formInline"class="demo-form-inline"size="small"><el-form-item><el-inputv-model="formInline.name"placeholder="請輸入姓名"prefix-icon="el-icon-search"></el-input></el-form-item><el-form-item><el-button type="primary" @click="find()" plain round>查詢</el-button></el-form-item><el-form-item><el-button type="success" @click="refresh()" round>刷新</el-button></el-form-item></el-form><!-- <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> --><el-table:data="compData"height="450"borderstyle="width: 100%":default-sort="{ prop: 'number', order: 'Ascending' }"><!-- <el-table-column prop="id" label="序號" align="center"></el-table-column> --><el-table-column type="selection" width="55"> </el-table-column><el-table-column prop="number" label="學(xué)號" align="center" sortable></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="sex_text" label="性別" align="center"></el-table-column><el-table-column prop="age" label="年齡" align="center" sortable></el-table-column><el-table-column prop="class" label="班級" align="center"></el-table-column><el-table-column prop="state_text" label="狀態(tài)" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column prop="phone" label="聯(lián)系方式" align="center"></el-table-column><el-table-column fixed="right" label="操作" align="center" width="100"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"size="mini"circle></el-button><el-button@click="del(scope.row)"icon="el-icon-delete"type="danger"size="mini"circle plain></el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 30, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div> </template><script> import { Info, InfoDel } from "@/api/api.js"; export default {data() {return {tableData: [],currentPage: 1, //當(dāng)前頁數(shù)pageSize: 10, //每頁顯示條數(shù)total: 0,formInline: {name: "",},};},created() {this.getData();},computed: {compData() {return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);},},methods: {find() {this.getData(this.formInline);},refresh() {this.formInline = {};this.getData(this.formInline);},handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},handleCurrentChange(val) {this.currentPage = val;},getData(params) {Info(params).then((res) => {console.log(res.data);if (res.data.status === 200) {this.total = res.data.total;this.tableData = res.data.data;this.tableData.forEach((item) => {item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");item.state === "1"? (item.state_text = "已入校"): item.state === "2"? (item.state_text = "未入校"): (item.state_text = "休學(xué)中");});}});},del(row) {console.log(row);InfoDel(row.id).then((res) => {if (res.data.status === 200) {this.$message({ message: res.data.message, type: "success" });this.getData();}});},}, }; </script><style lang="scss"> .UserList {.demo-form-inline {text-align: left;}.el-pagination {text-align: left;margin-top: 20x;} } </style>

信息列表頁實現(xiàn)

根據(jù)接口返回來的的數(shù)據(jù)進(jìn)行修改表頭及調(diào)整樣式?

?InfoList.vue

<template><div class="InfoList"><!-- 查詢、重置 --><el-form:inline="true":model="formInline"class="demo-form-inline"size="small"><el-form-item><el-inputv-model="formInline.name"prefix-icon="el-icon-search"placeholder="請輸入姓名"></el-input></el-form-item><el-form-item><el-button@click="find()"type="primary"icon="el-icon-search"circlesize="small"></el-button></el-form-item><el-form-item><el-buttontype="success"@click="add()"circlesize="small"icon="el-icon-circle-plus-outline"></el-button></el-form-item><el-form-item><el-buttontype="success"plain@click="refresh()"circlesize="small"icon="el-icon-refresh"></el-button></el-form-item><el-form-item><el-buttontype="danger"plain@click="delPitch()"circlesize="small"icon="el-icon-delete"></el-button></el-form-item></el-form><!-- <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> --><el-table:data="compData"height="450"borderstyle="width: 100%":default-sort="{ prop: 'number', order: 'Ascending' }"><!-- <el-table-column prop="id" label="序號" align="center"></el-table-column> --><el-table-column type="selection" width="55"> </el-table-column><el-table-column prop="number" label="學(xué)號" align="center" sortable></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="sex_text" label="性別" align="center"></el-table-column><el-table-column prop="age" label="年齡" align="center" sortable></el-table-column><el-table-column prop="father" label="父親" align="center"></el-table-column><el-table-column prop="mather" label="母親" align="center"></el-table-column><el-table-column prop="time" label="入校時間" align="center"></el-table-column><el-table-column prop="address" label="家庭住址" align="center"></el-table-column><el-table-column prop="phone" label="聯(lián)系方式" align="center"></el-table-column><el-table-column fixed="right" label="操作" width="100" align="center"><template slot-scope="scope"><el-button@click="edit(scope.row)"type="primary"icon="el-icon-edit"circlesize="mini"></el-button><el-button@click="del(scope.row)"type="danger"icon="el-icon-delete"circlesize="mini"></el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 30, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div> </template><script> import { Info, InfoDel } from "@/api/api.js"; export default {data() {return {tableData: [],currentPage: 1, //當(dāng)前頁數(shù)pageSize: 10, //每頁顯示條數(shù)total: 0,formInline: {name: "",},};},created() {this.getData();},computed: {compData() {return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);},},methods: {find() {this.getData(this.formInline);},refresh() {this.formInline = {};this.getData(this.formInline);},del(row) {console.log(row);InfoDel(row.id).then((res) => {if (res.data.status === 200) {this.$message({ message: res.data.message, type: "success" });this.getData();}});},handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},handleCurrentChange(val) {this.currentPage = val;},getData(params) {Info(params).then((res) => {console.log(res.data);if (res.data.status === 200) {this.total = res.data.total;this.tableData = res.data.data;this.tableData.forEach((item) => {item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");item.state === "1"? (item.state_text = "已入校"): item.state === "2"? (item.state_text = "未入校"): (item.state_text = "休學(xué)中");});}});},}, }; </script><style lang="scss"> .InfoList {.demo-form-inline {text-align: left;}.el-pagination {text-align: left;margin-top: 20x;} } </style>

?彈窗復(fù)用新增功能

1、找

?2、觸發(fā)式組件放置在頁面最下面，再按需修改

? ? ? ? ?①實現(xiàn)基本彈窗效果（隱藏，點擊后顯示）

? ? ? ? ②?修改表單內(nèi)容

1、修改用戶需要填的內(nèi)容，為提用戶體驗，實現(xiàn)更加良好的用戶交互性，性別填寫采用單選框、入校時間采用DatePicker日期選擇器?

2、定義表單校驗規(guī)則，使用v-model實現(xiàn)表單數(shù)據(jù)的雙向綁定

?表單效果：

?調(diào)整樣式：

????????①規(guī)劃左側(cè)label

??調(diào)整前? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????????調(diào)整后

????????????????????????? ? ? ?

?②調(diào)整彈窗dialog的寬度

3、完善表單的校驗規(guī)則

ps：敏感詞校驗沒有引入使用、還有待完善。

<template><div class="InfoList"><!-- 查詢、重置 --><el-form:inline="true":model="formInline"class="demo-form-inline"size="small"><el-form-item><el-inputv-model="formInline.name"prefix-icon="el-icon-search"placeholder="請輸入姓名"></el-input></el-form-item><el-form-item><el-button@click="find()"type="primary"icon="el-icon-search"circlesize="small"></el-button></el-form-item><el-form-item><el-buttontype="success"@click="addUser()"circlesize="small"icon="el-icon-circle-plus-outline"></el-button></el-form-item><el-form-item><el-buttontype="success"plain@click="refresh()"circlesize="small"icon="el-icon-refresh"></el-button></el-form-item><el-form-item><el-buttontype="danger"plain@click="delPitch()"circlesize="small"icon="el-icon-delete"></el-button></el-form-item></el-form><!-- <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> --><el-table:data="compData"height="450"borderstyle="width: 100%":default-sort="{ prop: 'number', order: 'Ascending' }"><!-- <el-table-column prop="id" label="序號" align="center"></el-table-column> --><el-table-column type="selection" width="55"> </el-table-column><el-table-column prop="id" label="id" align="center" sortable></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="sex_text" label="性別" align="center"></el-table-column><el-table-column prop="age" label="年齡" align="center" sortable></el-table-column><el-table-column prop="father" label="父親" align="center"></el-table-column><el-table-column prop="mather" label="母親" align="center"></el-table-column><el-table-column prop="time" label="入校時間" align="center"></el-table-column><el-table-column prop="address" label="家庭住址" align="center"></el-table-column><el-table-column prop="phone" label="聯(lián)系方式" align="center"></el-table-column><el-table-column fixed="right" label="操作" width="100" align="center"><template slot-scope="scope"><el-button@click="edit(scope.row)"type="primary"icon="el-icon-edit"circlesize="mini"></el-button><el-button@click="del(scope.row)"type="danger"icon="el-icon-delete"circlesize="mini"></el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 30, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><el-dialogtitle="新增用戶信息":visible.sync="dialogFormVisible"width="500px"><el-form :model="newUserForm" :rules="rules" ref="newUserForm"><el-form-item label="姓名" :label-width="formLabelWidth" prop="name"><el-input v-model="newUserForm.name" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="性別":label-width="formLabelWidth"prop="sex"icon="el-icon-male"><el-radio v-model="newUserForm.sex" label="1"><i class="el-icon-male"></i>男</el-radio><el-radio v-model="newUserForm.sex" label="2"><i class="el-icon-female"></i>女</el-radio></el-form-item><el-form-item label="年齡" :label-width="formLabelWidth" prop="age"><el-input v-model="newUserForm.age" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="父親姓名":label-width="formLabelWidth"prop="father"><el-input v-model="newUserForm.father" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="母親姓名":label-width="formLabelWidth"prop="mather"><el-input v-model="newUserForm.mather" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="入校時間":label-width="formLabelWidth"prop="time"><el-date-pickerv-model="newUserForm.time"align="right"format="yyyy 年 MM 月 dd 日"value-format="yyyy/MM/dd"type="date"placeholder="選擇入校日期":picker-options="pickAfter"></el-date-picker></el-form-item><el-form-itemlabel="家庭住址":label-width="formLabelWidth"prop="address"><el-input v-model="newUserForm.address" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="聯(lián)系方式":label-width="formLabelWidth"prop="phone"><el-input v-model="newUserForm.phone" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="comfirm('newUserForm')">確 定</el-button></div></el-dialog></div> </template><script> import { infoList, UserDel, addInfo } from "@/api/api.js"; import {NotNullRule,newUsernameRule,ageRule,phoneRule, } from "@/utils/validate"; export default {data() {return {tableData: [],currentPage: 1, //當(dāng)前頁數(shù)pageSize: 10, //每頁顯示條數(shù)total: 0,dialogFormVisible: false,formInline: {name: "",},newUserForm: {name: "",sex: "1",age: "",father: "",mather: "",time: "",address: "",phone: "",},pickAfter: {disabledDate(time) {return time.getTime() > Date.now() // 如果沒有后面的-8.64e7就是不可以選擇今天的},},rules: {name: [{ validator: newUsernameRule, trigger: "blur", required:true }],sex: [{ validator: NotNullRule, trigger: "blur", required:true }],age: [{ validator: ageRule, trigger: "blur", required:true }],time: [{ validator: NotNullRule, trigger: "blur", required:true }],address: [{ validator: NotNullRule, trigger: "blur", required:true }],phone: [{ validator: phoneRule, trigger: "blur", required:true }],},formLabelWidth: "80px",};},created() {this.getData();},computed: {compData() {return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);},// copDate() {// return new Date().toLocaleDateString();// }},methods: {addUser() {this.dialogFormVisible = true;},comfirm(newUserForm) {console.log(newUserForm, this.newUserForm);this.$refs[newUserForm].validate(valid => {if(valid){console.log(newUserForm, this.newUserForm)addInfo(this.newUserForm).then(res => {if(res.data.status === 200){this.dialogFormVisible = falsethis.$message({type: 'success', message: res.data.message})}})}})},find() {this.getData(this.formInline);},refresh() {this.formInline = {};this.getData(this.formInline);},del(row) {console.log(row);UserDel(row.id).then((res) => {if (res.data.status === 200) {this.$message({ message: res.data.message, type: "success" });this.getData();}});},getData(params) {infoList(params).then((res) => {console.log(res.data);if (res.data.status === 200) {this.total = res.data.total;this.tableData = res.data.data;this.tableData.forEach((item) => {item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");item.state === "1"? (item.state_text = "已入校"): item.state === "2"? (item.state_text = "未入校"): (item.state_text = "休學(xué)中");});}});},handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},handleCurrentChange(val) {this.currentPage = val;},}, }; </script><style lang="scss"> .InfoList {.demo-form-inline {text-align: left;}.el-pagination {text-align: left;margin-top: 20x;} } </style> //信息列表的 //通用校驗——判空 export function NotNullRule(rule, value, callback) {if (value === "") {callback(new Error("此處不能為空"));} else {callback();} } //新增用戶的姓名校驗 export function newUsernameRule(rule, value, callback) {let CName = /^(?:[\u4e00-\u9fa5·]{2,16})$/;let EName = /(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/;if (value === "") {callback(new Error("請輸入姓名"));} else if (!(CName.test(value) || EName.test(value))) {callback(new Error("請輸入中文姓名或者20位字母以內(nèi)的英文名"));} else{// forbiddenStrRule(rule, value, callback);callback();} } //新增用戶的聯(lián)系方式校驗 export function phoneRule(rule, value, callback) {let phone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/if (value === "") {callback(new Error("請輸入手機號"));} else if(!phone.test(value)) {callback(new Error("請輸入正確的手機號格式"));}else{callback();} } //新增用戶的年齡校驗 export function ageRule(rule, value, callback) {// 6-12位密碼需要包含大小寫字母和數(shù)字以及特殊符號let age = /^([1-3]|[0-9]{2})$/;if (value === "") {callback(new Error("請輸入年齡"));} else if (!age.test(value)) {callback(new Error("用戶年齡不合理"));} else {callback();} } //敏感詞過濾 export function forbiddenStrRule(rule, value, callback) {//定義敏感字符let forbiddenArray = ['xx', '<', '>', '黃色', 'sb', 'fuck', 'md', 'laji', '靠', 'nm', 'tm', 'tmd', 'c'];for (var i = 0; i < forbiddenArray.length; i++) {if(value.indexOf(forbiddenArray[i])){// value = value.replace(forbiddenArray[i], "*");callback(new Error("有敏感詞，請重新輸入。"));}else{return callback();}}} //新增用戶的入校時間校驗 export function timeRule(rule, value, callback) {console.log(value)let time = new Date();// value.join(" ");let year = time.getFullYear().toString();let month = (time.getMonth() + 1).toString();let date = time.getDate().toString();let dateValue = value.split("/");console.log(dateValue)if (value === "") {callback(new Error("請輸入入校時間"));} else if (year === dateValue[0]) {if (month === dateValue[1] && date >= dateValue[2]) {console.log("1")callback();} else if (month > dateValue[1]) {console.log("2")callback();}} else if (year > dateValue[0]) {console.log(year)console.log(dateValue[0])console.log("3")callback();} else {callback(new Error("用戶選擇的時間錯誤，還未到時間"));} }

?4、封裝api請求接口、連接后端

創(chuàng)建點擊事件，對傳遞數(shù)據(jù)對象——新建用戶信息，進(jìn)行打印查看。

點擊確定，校驗表單：

發(fā)送請求：

?確認(rèn)后端數(shù)據(jù)接口添加成功后，應(yīng)該刷新表單，所以完善一下信息列表的查詢接口，與用戶列表查詢接口相似

注意這里的性別格式轉(zhuǎn)換的顯示問題：因為sex為string類型，所以這里要加 ‘’

演示：

??彈窗復(fù)用修改功能

ps：動態(tài)加載的沒有（），不是function，在computed里監(jiān)控。所以

連接后端

?由于新增和修改用的是同一個表單，點擊的確定按鈕 ，就需要先判斷是新增還是修改來像后端發(fā)起請求，也就是可以根據(jù)forrm表單title的狀態(tài)：真就是修改，假就是新增。

測試：

※ 再修改時，不將數(shù)據(jù)綁定而是備份，避免不了解計算機原理的用戶，在修改表單數(shù)據(jù)時，列表數(shù)據(jù)也在同時發(fā)生變化，沒有點擊確定，誤以為數(shù)據(jù)已經(jīng)修改成功。所以不直接賦值：

取消按鈕：

InfoList.vue:?

<template><div class="InfoList"><!-- 查詢、重置 --><el-form:inline="true":model="formInline"class="demo-form-inline"size="small"><el-form-item><el-inputv-model="formInline.name"prefix-icon="el-icon-search"placeholder="請輸入姓名"></el-input></el-form-item><el-form-item><el-button@click="find()"type="primary"icon="el-icon-search"circlesize="small"></el-button></el-form-item><el-form-item><el-buttontype="success"@click="addUser()"circlesize="small"icon="el-icon-circle-plus-outline"></el-button></el-form-item><el-form-item><el-buttontype="success"plain@click="refresh()"circlesize="small"icon="el-icon-refresh"></el-button></el-form-item><el-form-item><el-buttontype="danger"plain@click="delPitch()"circlesize="small"icon="el-icon-delete"></el-button></el-form-item></el-form><!-- <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" height="450" border style="width: 100%" :default-sort="{ prop: 'number', order: 'Ascending' }"> --><el-table:data="compData"height="450"borderstyle="width: 100%":default-sort="{ prop: 'number', order: 'Ascending' }"><!-- <el-table-column prop="id" label="序號" align="center"></el-table-column> --><el-table-column type="selection" width="55"> </el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="sex_text" label="性別" align="center"></el-table-column><el-table-column prop="age" label="年齡" align="center" sortable></el-table-column><el-table-column prop="father" label="父親" align="center"></el-table-column><el-table-column prop="mather" label="母親" align="center"></el-table-column><el-table-column prop="time" label="入校時間" align="center"></el-table-column><el-table-column prop="address" label="家庭住址" align="center"></el-table-column><el-table-column prop="phone" label="聯(lián)系方式" align="center"></el-table-column><el-table-column fixed="right" label="操作" width="100" align="center"><template slot-scope="scope"><el-button@click="edit(scope.row)"type="primary"icon="el-icon-edit"circlesize="mini"></el-button><el-button@click="del(scope.row)"type="danger"icon="el-icon-delete"circlesize="mini"></el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 30, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><el-dialog:title="compTitle":visible.sync="dialogFormVisible"width="500px"><el-form :model="newUserForm" :rules="rules" ref="newUserForm"><el-form-item label="姓名" :label-width="formLabelWidth" prop="name"><el-input v-model="newUserForm.name" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="性別":label-width="formLabelWidth"prop="sex"icon="el-icon-male"><el-radio v-model="newUserForm.sex" label="1"><i class="el-icon-male"></i>男</el-radio><el-radio v-model="newUserForm.sex" label="2"><i class="el-icon-female"></i>女</el-radio></el-form-item><el-form-item label="年齡" :label-width="formLabelWidth" prop="age"><el-input v-model="newUserForm.age" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="父親姓名":label-width="formLabelWidth"prop="father"><el-input v-model="newUserForm.father" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="母親姓名":label-width="formLabelWidth"prop="mather"><el-input v-model="newUserForm.mather" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="入校時間":label-width="formLabelWidth"prop="time"><el-date-pickerv-model="newUserForm.time"align="right"format="yyyy 年 MM 月 dd 日"value-format="yyyy/MM/dd"type="date"placeholder="選擇入校日期":picker-options="pickAfter"></el-date-picker></el-form-item><el-form-itemlabel="家庭住址":label-width="formLabelWidth"prop="address"><el-input v-model="newUserForm.address" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="聯(lián)系方式":label-width="formLabelWidth"prop="phone"><el-input v-model="newUserForm.phone" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="closeForm('newUserForm')">取 消</el-button><el-button type="primary" @click="comfirm('newUserForm')">確 定</el-button></div></el-dialog></div> </template><script> import { infoList, UserDel, addInfo, updateInfo } from "@/api/api.js"; import {NotNullRule,newUsernameRule,ageRule,phoneRule, } from "@/utils/validate"; export default {data() {return {tableData: [],currentPage: 1, //當(dāng)前頁數(shù)pageSize: 10, //每頁顯示條數(shù)total: 0,dialogFormVisible: false,formInline: {name: "",},newUserForm: {name: "",sex: "1",age: "",father: "",mather: "",time: "",address: "",phone: "",},pickAfter: {disabledDate(time) {return time.getTime() > Date.now(); // 如果沒有后面的-8.64e7就是不可以選擇今天的},},rules: {name: [{ validator: newUsernameRule, trigger: "blur", required: true }],sex: [{ validator: NotNullRule, trigger: "blur", required: true }],age: [{ validator: ageRule, trigger: "blur", required: true }],time: [{ validator: NotNullRule, trigger: "blur", required: true }],address: [{ validator: NotNullRule, trigger: "blur", required: true }],phone: [{ validator: phoneRule, trigger: "blur", required: true }],},formLabelWidth: "80px",formState: true,};},created() {this.getData();},computed: {compData() {return this.tableData.slice((this.currentPage - 1) * this.pageSize,this.currentPage * this.pageSize);},compTitle() {return this.formState ? "修改用戶信息" : "新增用戶信息";},},methods: {addUser() {this.formState = false;this.dialogFormVisible = true;this.newUserForm = {name: "",sex: "1",age: "",father: "",mather: "",time: "",address: "",phone: "",};},edit(row) {this.formState = true;this.dialogFormVisible = true;// this.newUserForm = row;this.newUserForm = { ...row };},comfirm(newUserForm) {this.$refs[newUserForm].validate((valid) => {if (valid) {if (this.formState) {updateInfo(this.newUserForm).then((res) => {if (res.data.status === 200) {this.getData();this.dialogFormVisible = false;this.$message({ type: "success", message: res.data.message });}});} else {addInfo(this.newUserForm).then((res) => {if (res.data.status === 200) {this.getData();this.dialogFormVisible = false;this.$message({ type: "success", message: res.data.message });}});}}});},closeForm(newUserForm) {this.$refs[newUserForm].resetFields();this.dialogFormVisible = false;},find() {this.getData(this.formInline);},refresh() {this.formInline = {};this.getData(this.formInline);},del(row) {console.log(row);UserDel(row.id).then((res) => {if (res.data.status === 200) {this.$message({ message: res.data.message, type: "success" });this.getData();}});},getData(params) {infoList(params).then((res) => {console.log(res.data);if (res.data.status === 200) {this.total = res.data.total;this.tableData = res.data.data;this.tableData.forEach((item) => {item.sex === '1' ? (item.sex_text = "男") : (item.sex_text = "女");});}});},handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},handleCurrentChange(val) {this.currentPage = val;},}, }; </script><style lang="scss"> .InfoList {.demo-form-inline {text-align: left;}.el-pagination {text-align: left;margin-top: 20x;} } </style>

?api.js

//信息列表 //查詢 export function infoList(param){return service({method: 'get',url: '/info',param}) } //新增用戶接口 export function addInfo(data){data = qs.stringify(data)return service({method: 'post',url: '/info',data}) } //修改信息接口 export function updateInfo(data){data = qs.stringify(data)return service({method: 'put',url: '/info',data}) }

查詢、刪除單個按鈕功能

?

?InfoList.vue

<el-table><el-table-column fixed="right" label="操作" width="100" align="center"><template slot-scope="scope"><el-button@click="del(scope.row)"type="danger"icon="el-icon-delete"circlesize="mini"></el-button></template></el-table-column> </el-table> del(row) {console.log(row);this.$alert("你確定要刪除嗎？", "提示", {confirmButtonText: "確定",callback: () => {delInfo(row.id).then((res) => {if (res.data.status === 200) {this.$message({ message: res.data.message, type: "success" });this.getData();}});},});},

?api.js

//刪除信息接口 export function delInfo(id){return service({method: 'delete',url: `/info/${id}`}) }

封裝新增和修改信息的 api接口：

上面有個小問題：

測試：?

?信息列表的條件查詢和批刪除因為后端沒有寫，所以這里只有按鈕沒有真實現(xiàn)。

總結(jié)

以上是生活随笔為你收集整理的通用后台管理系统前端界面Ⅺ——信息列表页（弹窗复用增改、CRUD前端基础实现）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。