因為需求發生了點變化，所以把之前的代碼稍改一下，把之前的信息列表全復制到用戶列表中，最后效果一樣。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="學號" 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="狀態" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column prop="phone" label="聯系方式" 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, //當前頁數pageSize: 10, //每頁顯示條數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 = "休學中");});}});},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>

調整一下頁面元素布局和樣式：按鈕、圖標等。調整后

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="學號" 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="狀態" align="center"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column prop="phone" label="聯系方式" 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, //當前頁數pageSize: 10, //每頁顯示條數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 = "休學中");});}});},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>

信息列表頁實現

根據接口返回來的的數據進行修改表頭及調整樣式?

?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="學號" 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="聯系方式" 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, //當前頁數pageSize: 10, //每頁顯示條數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 = "休學中");});}});},}, }; </script><style lang="scss"> .InfoList {.demo-form-inline {text-align: left;}.el-pagination {text-align: left;margin-top: 20x;} } </style>

?彈窗復用新增功能

1、找

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

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

? ? ? ? ②?修改表單內容

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

2、定義表單校驗規則，使用v-model實現表單數據的雙向綁定

?表單效果：

?調整樣式：

????????①規劃左側label

??調整前? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????????????????調整后

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

?②調整彈窗dialog的寬度

3、完善表單的校驗規則

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="聯系方式" 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="聯系方式":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, //當前頁數pageSize: 10, //每頁顯示條數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 = "休學中");});}});},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位字母以內的英文名"));} else{// forbiddenStrRule(rule, value, callback);callback();} } //新增用戶的聯系方式校驗 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位密碼需要包含大小寫字母和數字以及特殊符號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請求接口、連接后端

創建點擊事件，對傳遞數據對象——新建用戶信息，進行打印查看。

點擊確定，校驗表單：

發送請求：

?確認后端數據接口添加成功后，應該刷新表單，所以完善一下信息列表的查詢接口，與用戶列表查詢接口相似

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

演示：

??彈窗復用修改功能

ps：動態加載的沒有（），不是function，在computed里監控。所以

連接后端

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

測試：

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

取消按鈕：

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="聯系方式" 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="聯系方式":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, //當前頁數pageSize: 10, //每頁顯示條數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接口：

上面有個小問題：

測試：?

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

總結

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

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