• 通用后台管理系统前端界面Ⅺ——信息列表页（弹窗复用增改、CRUD前端基础实现）

    因为需求发生了点变化，所以把之前的代码稍改一下，把之前的信息列表全复制到用户列表中，最后效果一样。UserList.vue

    1. <template>
    2.   <div class="UserList">
    3.     
    4.     <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
    5.       <el-form-item label="姓名">
    6.         <el-input v-model="formInline.name" placeholder="请输入姓名">el-input>
    7.       el-form-item>
    8.       <el-form-item>
    9.           <el-button type="primary" @click="find()">查询el-button>
    10.       el-form-item>
    11.       <el-form-item>
    12.         <el-button type="danger" @click="refresh()">刷新el-button>
    13.       el-form-item>
    14.     el-form>
    15.     
    16.     <el-table
    17.       :data="compData"
    18.       height="450"
    19.       border
    20.       style="width: 100%"
    21.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    22.     >
    23.       
    24.       <el-table-column type="selection" width="55"> el-table-column>
    25.       <el-table-column prop="number" label="学号" align="center" sortable>
    26.       el-table-column>
    27.       <el-table-column prop="name" label="姓名" align="center">
    28.       el-table-column>
    29.       <el-table-column prop="sex_text" label="性别" align="center">
    30.       el-table-column>
    31.       <el-table-column prop="age" label="年龄" align="center" sortable>
    32.       el-table-column>
    33.       <el-table-column prop="class" label="班级" align="center">
    34.       el-table-column>
    35.       <el-table-column prop="state_text" label="状态" align="center">
    36.       el-table-column>
    37.       <el-table-column prop="address" label="地址" align="center">
    38.       el-table-column>
    39.       <el-table-column prop="phone" label="联系方式" align="center">
    40.       el-table-column>
    41.       <el-table-column fixed="right" label="操作" align="center">
    42.         <template slot-scope="scope">
    43.           <el-button
    44.             @click="del(scope.row)"
    45.             icon="el-icon-delete"
    46.             type="danger"
    47.             size="mini"
    48.             circle
    49.           >el-button>
    50.           <el-button
    51.             type="primary"
    52.             icon="el-icon-edit"
    53.             size="mini"
    54.             circle
    55.           >el-button>
    56.         template>
    57.       el-table-column>
    58.     el-table>
    59.     <el-pagination
    60.       @size-change="handleSizeChange"
    61.       @current-change="handleCurrentChange"
    62.       :current-page="currentPage"
    63.       :page-sizes="[5, 10, 20, 30, 50]"
    64.       :page-size="pageSize"
    65.       layout="total, sizes, prev, pager, next, jumper"
    66.       :total="total"
    67.     >
    68.     el-pagination>
    69.   div>
    70. template>
    71.  
    72. <script>
    73. import { Info, InfoDel } from "@/api/api.js";
    74. export default {
    75.   data() {
    76.     return {
    77.       tableData: [],
    78.       currentPage: 1, //当前页数
    79.       pageSize: 10, //每页显示条数
    80.       total: 0,
    81.       formInline: {
    82.         name: ''
    83.       }
    84.     };
    85.   },
    86.   created() {
    87.     this.getData();
    88.   },
    89.   computed: {
    90.     compData() {
    91.       return this.tableData.slice(
    92.         (this.currentPage - 1) * this.pageSize,
    93.         this.currentPage * this.pageSize
    94.       );
    95.     },
    96.   },
    97.   methods: {
    98.     find(){
    99.       this.getData(this.formInline)
    100.     },
    101.     refresh(){
    102.       this.formInline = {}
    103.       this.getData(this.formInline)
    104.     },
    105.     handleSizeChange(val) {
    106.       this.pageSize = val;
    107.       this.currentPage = 1;
    108.     },
    109.     handleCurrentChange(val) {
    110.       this.currentPage = val;
    111.     },
    112.     getData(params) {
    113.       Info(params).then((res) => {
    114.         console.log(res.data);
    115.         if (res.data.status === 200) {
    116.           this.total = res.data.total;
    117.           this.tableData = res.data.data;
    118.           this.tableData.forEach((item) => {
    119.             item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
    120.             item.state === "1"
    121.               ? (item.state_text = "已入校")
    122.               : item.state === "2"
    123.               ? (item.state_text = "未入校")
    124.               : (item.state_text = "休学中");
    125.           });
    126.         }
    127.       });
    128.     },
    129.     del(row) {
    130.       console.log(row);
    131.       InfoDel(row.id).then((res) => {
    132.         if (res.data.status === 200) {
    133.           this.$message({ message: res.data.message, type: "success" });
    134.           this.getData();
    135.         }
    136.       });
    137.     },
    138.   },
    139. };
    140. script>
    141.  
    142. <style lang="scss">
    143. .UserList {
    144.   .demo-form-inline {
    145.     text-align: left;
    146.   }
    147.   .el-pagination {
    148.     text-align: left;
    149.     margin-top: 20x;
    150.   }
    151. }
    152. style>

    调整一下页面元素布局和样式：按钮、图标等。调整后

    UserList.vue

    1. <template>
    2.   <div class="UserList">
    3.     
    4.     <el-form
    5.       :inline="true"
    6.       :model="formInline"
    7.       class="demo-form-inline"
    8.       size="small"
    9.     >
    10.       <el-form-item>
    11.         <el-input
    12.           v-model="formInline.name"
    13.           placeholder="请输入姓名"
    14.           prefix-icon="el-icon-search"
    15.         >el-input>
    16.       el-form-item>
    17.       <el-form-item>
    18.         <el-button type="primary" @click="find()" plain round>查询el-button>
    19.       el-form-item>
    20.       <el-form-item>
    21.         <el-button type="success" @click="refresh()" round>刷新el-button>
    22.       el-form-item>
    23.     el-form>
    24.     
    25.     <el-table
    26.       :data="compData"
    27.       height="450"
    28.       border
    29.       style="width: 100%"
    30.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    31.     >
    32.       
    33.       <el-table-column type="selection" width="55"> el-table-column>
    34.       <el-table-column prop="number" label="学号" align="center" sortable>
    35.       el-table-column>
    36.       <el-table-column prop="name" label="姓名" align="center">
    37.       el-table-column>
    38.       <el-table-column prop="sex_text" label="性别" align="center">
    39.       el-table-column>
    40.       <el-table-column prop="age" label="年龄" align="center" sortable>
    41.       el-table-column>
    42.       <el-table-column prop="class" label="班级" align="center">
    43.       el-table-column>
    44.       <el-table-column prop="state_text" label="状态" align="center">
    45.       el-table-column>
    46.       <el-table-column prop="address" label="地址" align="center">
    47.       el-table-column>
    48.       <el-table-column prop="phone" label="联系方式" align="center">
    49.       el-table-column>
    50.       <el-table-column fixed="right" label="操作" align="center" width="100">
    51.         <template slot-scope="scope">
    52.           <el-button
    53.             type="primary"
    54.             icon="el-icon-edit"
    55.             size="mini"
    56.             circle
    57.             
    58.           >el-button>
    59.           <el-button
    60.             @click="del(scope.row)"
    61.             icon="el-icon-delete"
    62.             type="danger"
    63.             size="mini"
    64.             circle plain
    65.           >el-button>
    66.         template>
    67.       el-table-column>
    68.     el-table>
    69.     <el-pagination
    70.       @size-change="handleSizeChange"
    71.       @current-change="handleCurrentChange"
    72.       :current-page="currentPage"
    73.       :page-sizes="[5, 10, 20, 30, 50]"
    74.       :page-size="pageSize"
    75.       layout="total, sizes, prev, pager, next, jumper"
    76.       :total="total"
    77.     >
    78.     el-pagination>
    79.   div>
    80. template>
    81.  
    82. <script>
    83. import { Info, InfoDel } from "@/api/api.js";
    84. export default {
    85.   data() {
    86.     return {
    87.       tableData: [],
    88.       currentPage: 1, //当前页数
    89.       pageSize: 10, //每页显示条数
    90.       total: 0,
    91.       formInline: {
    92.         name: "",
    93.       },
    94.     };
    95.   },
    96.   created() {
    97.     this.getData();
    98.   },
    99.   computed: {
    100.     compData() {
    101.       return this.tableData.slice(
    102.         (this.currentPage - 1) * this.pageSize,
    103.         this.currentPage * this.pageSize
    104.       );
    105.     },
    106.   },
    107.   methods: {
    108.     find() {
    109.       this.getData(this.formInline);
    110.     },
    111.     refresh() {
    112.       this.formInline = {};
    113.       this.getData(this.formInline);
    114.     },
    115.     handleSizeChange(val) {
    116.       this.pageSize = val;
    117.       this.currentPage = 1;
    118.     },
    119.     handleCurrentChange(val) {
    120.       this.currentPage = val;
    121.     },
    122.     getData(params) {
    123.       Info(params).then((res) => {
    124.         console.log(res.data);
    125.         if (res.data.status === 200) {
    126.           this.total = res.data.total;
    127.           this.tableData = res.data.data;
    128.           this.tableData.forEach((item) => {
    129.             item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
    130.             item.state === "1"
    131.               ? (item.state_text = "已入校")
    132.               : item.state === "2"
    133.               ? (item.state_text = "未入校")
    134.               : (item.state_text = "休学中");
    135.           });
    136.         }
    137.       });
    138.     },
    139.     del(row) {
    140.       console.log(row);
    141.       InfoDel(row.id).then((res) => {
    142.         if (res.data.status === 200) {
    143.           this.$message({ message: res.data.message, type: "success" });
    144.           this.getData();
    145.         }
    146.       });
    147.     },
    148.   },
    149. };
    150. script>
    151.  
    152. <style lang="scss">
    153. .UserList {
    154.   .demo-form-inline {
    155.     text-align: left;
    156.   }
    157.   .el-pagination {
    158.     text-align: left;
    159.     margin-top: 20x;
    160.   }
    161. }
    162. style>

    信息列表页实现

    根据接口返回来的的数据进行修改表头及调整样式 

     InfoList.vue

    1. <template>
    2.   <div class="InfoList">
    3.     
    4.     <el-form
    5.       :inline="true"
    6.       :model="formInline"
    7.       class="demo-form-inline"
    8.       size="small"
    9.     >
    10.       <el-form-item>
    11.         <el-input
    12.           v-model="formInline.name"
    13.           prefix-icon="el-icon-search"
    14.           placeholder="请输入姓名"
    15.         >el-input>
    16.       el-form-item>
    17.       <el-form-item>
    18.         <el-button
    19.           @click="find()"
    20.           type="primary"
    21.           icon="el-icon-search"
    22.           circle
    23.           size="small"
    24.         >el-button>
    25.       el-form-item>
    26.       <el-form-item>
    27.         <el-button
    28.           type="success"
    29.           @click="add()"
    30.           circle
    31.           size="small"
    32.           icon="el-icon-circle-plus-outline"
    33.         >el-button>
    34.       el-form-item>
    35.       <el-form-item>
    36.         <el-button
    37.           type="success"
    38.           plain
    39.           @click="refresh()"
    40.           circle
    41.           size="small"
    42.           icon="el-icon-refresh"
    43.         >el-button>
    44.       el-form-item>
    45.       <el-form-item>
    46.         <el-button
    47.           type="danger"
    48.           plain
    49.           @click="delPitch()"
    50.           circle
    51.           size="small"
    52.           icon="el-icon-delete"
    53.         >el-button>
    54.       el-form-item>
    55.     el-form>
    56.     
    57.     <el-table
    58.       :data="compData"
    59.       height="450"
    60.       border
    61.       style="width: 100%"
    62.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    63.     >
    64.       
    65.       <el-table-column type="selection" width="55"> el-table-column>
    66.       <el-table-column prop="number" label="学号" align="center" sortable>
    67.       el-table-column>
    68.       <el-table-column prop="name" label="姓名" align="center">
    69.       el-table-column>
    70.       <el-table-column prop="sex_text" label="性别" align="center">
    71.       el-table-column>
    72.       <el-table-column prop="age" label="年龄" align="center" sortable>
    73.       el-table-column>
    74.       <el-table-column prop="father" label="父亲" align="center">
    75.       el-table-column>
    76.       <el-table-column prop="mather" label="母亲" align="center">
    77.       el-table-column>
    78.       <el-table-column prop="time" label="入校时间" align="center">
    79.       el-table-column>
    80.       <el-table-column prop="address" label="家庭住址" align="center">
    81.       el-table-column>
    82.       <el-table-column prop="phone" label="联系方式" align="center">
    83.       el-table-column>
    84.       <el-table-column fixed="right" label="操作" width="100" align="center">
    85.         <template slot-scope="scope">
    86.           <el-button
    87.             @click="edit(scope.row)"
    88.             type="primary"
    89.             icon="el-icon-edit"
    90.             circle
    91.             size="mini"
    92.           >el-button>
    93.           <el-button
    94.             @click="del(scope.row)"
    95.             type="danger"
    96.             icon="el-icon-delete"
    97.             circle
    98.             size="mini"
    99.           >el-button>
    100.         template>
    101.       el-table-column>
    102.     el-table>
    103.     <el-pagination
    104.       @size-change="handleSizeChange"
    105.       @current-change="handleCurrentChange"
    106.       :current-page="currentPage"
    107.       :page-sizes="[5, 10, 20, 30, 50]"
    108.       :page-size="pageSize"
    109.       layout="total, sizes, prev, pager, next, jumper"
    110.       :total="total"
    111.     >
    112.     el-pagination>
    113.   div>
    114. template>
    115.  
    116. <script>
    117. import { Info, InfoDel } from "@/api/api.js";
    118. export default {
    119.   data() {
    120.     return {
    121.       tableData: [],
    122.       currentPage: 1, //当前页数
    123.       pageSize: 10, //每页显示条数
    124.       total: 0,
    125.       formInline: {
    126.         name: "",
    127.       },
    128.     };
    129.   },
    130.   created() {
    131.     this.getData();
    132.   },
    133.   computed: {
    134.     compData() {
    135.       return this.tableData.slice(
    136.         (this.currentPage - 1) * this.pageSize,
    137.         this.currentPage * this.pageSize
    138.       );
    139.     },
    140.   },
    141.   methods: {
    142.     find() {
    143.       this.getData(this.formInline);
    144.     },
    145.     refresh() {
    146.       this.formInline = {};
    147.       this.getData(this.formInline);
    148.     },
    149.     del(row) {
    150.       console.log(row);
    151.       InfoDel(row.id).then((res) => {
    152.         if (res.data.status === 200) {
    153.           this.$message({ message: res.data.message, type: "success" });
    154.           this.getData();
    155.         }
    156.       });
    157.     },
    158.     handleSizeChange(val) {
    159.       this.pageSize = val;
    160.       this.currentPage = 1;
    161.     },
    162.     handleCurrentChange(val) {
    163.       this.currentPage = val;
    164.     },
    165.     getData(params) {
    166.       Info(params).then((res) => {
    167.         console.log(res.data);
    168.         if (res.data.status === 200) {
    169.           this.total = res.data.total;
    170.           this.tableData = res.data.data;
    171.           this.tableData.forEach((item) => {
    172.             item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
    173.             item.state === "1"
    174.               ? (item.state_text = "已入校")
    175.               : item.state === "2"
    176.               ? (item.state_text = "未入校")
    177.               : (item.state_text = "休学中");
    178.           });
    179.         }
    180.       });
    181.     },
    182.   },
    183. };
    184. script>
    185.  
    186. <style lang="scss">
    187. .InfoList {
    188.   .demo-form-inline {
    189.     text-align: left;
    190.   }
    191.  
    192.   .el-pagination {
    193.     text-align: left;
    194.     margin-top: 20x;
    195.   }
    196. }
    197. style>

     弹窗复用新增功能

    1、找

     2、触发式组件放置在页面最下面，再按需修改

             ①实现基本弹窗效果（隐藏，点击后显示）

            ② 修改表单内容

    1、修改用户需要填的内容，为提用户体验，实现更加良好的用户交互性，性别填写采用单选框、入校时间采用DatePicker日期选择器 

    2、定义表单校验规则，使用v-model实现表单数据的双向绑定

     表单效果：

     调整样式：

            ①规划左侧label

      调整前                                                        调整后

                                   

     ②调整弹窗dialog的宽度

    3、完善表单的校验规则

    ps：敏感词校验没有引入使用、还有待完善。

    1. <template>
    2.   <div class="InfoList">
    3.     
    4.     <el-form
    5.       :inline="true"
    6.       :model="formInline"
    7.       class="demo-form-inline"
    8.       size="small"
    9.     >
    10.       <el-form-item>
    11.         <el-input
    12.           v-model="formInline.name"
    13.           prefix-icon="el-icon-search"
    14.           placeholder="请输入姓名"
    15.         >el-input>
    16.       el-form-item>
    17.       <el-form-item>
    18.         <el-button
    19.           @click="find()"
    20.           type="primary"
    21.           icon="el-icon-search"
    22.           circle
    23.           size="small"
    24.         >el-button>
    25.       el-form-item>
    26.       <el-form-item>
    27.         <el-button
    28.           type="success"
    29.           @click="addUser()"
    30.           circle
    31.           size="small"
    32.           icon="el-icon-circle-plus-outline"
    33.         >el-button>
    34.       el-form-item>
    35.       <el-form-item>
    36.         <el-button
    37.           type="success"
    38.           plain
    39.           @click="refresh()"
    40.           circle
    41.           size="small"
    42.           icon="el-icon-refresh"
    43.         >el-button>
    44.       el-form-item>
    45.       <el-form-item>
    46.         <el-button
    47.           type="danger"
    48.           plain
    49.           @click="delPitch()"
    50.           circle
    51.           size="small"
    52.           icon="el-icon-delete"
    53.         >el-button>
    54.       el-form-item>
    55.     el-form>
    56.     
    57.     <el-table
    58.       :data="compData"
    59.       height="450"
    60.       border
    61.       style="width: 100%"
    62.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    63.     >
    64.       
    65.       <el-table-column type="selection" width="55"> el-table-column>
    66.       <el-table-column prop="id" label="id" align="center" sortable>
    67.       el-table-column>
    68.       <el-table-column prop="name" label="姓名" align="center">
    69.       el-table-column>
    70.       <el-table-column prop="sex_text" label="性别" align="center">
    71.       el-table-column>
    72.       <el-table-column prop="age" label="年龄" align="center" sortable>
    73.       el-table-column>
    74.       <el-table-column prop="father" label="父亲" align="center">
    75.       el-table-column>
    76.       <el-table-column prop="mather" label="母亲" align="center">
    77.       el-table-column>
    78.       <el-table-column prop="time" label="入校时间" align="center">
    79.       el-table-column>
    80.       <el-table-column prop="address" label="家庭住址" align="center">
    81.       el-table-column>
    82.       <el-table-column prop="phone" label="联系方式" align="center">
    83.       el-table-column>
    84.       <el-table-column fixed="right" label="操作" width="100" align="center">
    85.         <template slot-scope="scope">
    86.           <el-button
    87.             @click="edit(scope.row)"
    88.             type="primary"
    89.             icon="el-icon-edit"
    90.             circle
    91.             size="mini"
    92.           >el-button>
    93.           <el-button
    94.             @click="del(scope.row)"
    95.             type="danger"
    96.             icon="el-icon-delete"
    97.             circle
    98.             size="mini"
    99.           >el-button>
    100.         template>
    101.       el-table-column>
    102.     el-table>
    103.     <el-pagination
    104.       @size-change="handleSizeChange"
    105.       @current-change="handleCurrentChange"
    106.       :current-page="currentPage"
    107.       :page-sizes="[5, 10, 20, 30, 50]"
    108.       :page-size="pageSize"
    109.       layout="total, sizes, prev, pager, next, jumper"
    110.       :total="total"
    111.     >
    112.     el-pagination>
    113.     <el-dialog
    114.       title="新增用户信息"
    115.       :visible.sync="dialogFormVisible"
    116.       width="500px"
    117.     >
    118.       <el-form :model="newUserForm" :rules="rules" ref="newUserForm">
    119.         <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
    120.           <el-input v-model="newUserForm.name" autocomplete="off">el-input>
    121.         el-form-item>
    122.         <el-form-item
    123.           label="性别"
    124.           :label-width="formLabelWidth"
    125.           prop="sex"
    126.           icon="el-icon-male"
    127.         >
    128.           <el-radio v-model="newUserForm.sex" label="1"
    129.             ><i class="el-icon-male">i>男
    130.           >
    131.           <el-radio v-model="newUserForm.sex" label="2"
    132.             ><i class="el-icon-female">i>女
    133.           >
    134.         el-form-item>
    135.         <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
    136.           <el-input v-model="newUserForm.age" autocomplete="off">el-input>
    137.         el-form-item>
    138.         <el-form-item
    139.           label="父亲姓名"
    140.           :label-width="formLabelWidth"
    141.           prop="father"
    142.         >
    143.           <el-input v-model="newUserForm.father" autocomplete="off">el-input>
    144.         el-form-item>
    145.         <el-form-item
    146.           label="母亲姓名"
    147.           :label-width="formLabelWidth"
    148.           prop="mather"
    149.         >
    150.           <el-input v-model="newUserForm.mather" autocomplete="off">el-input>
    151.         el-form-item>
    152.  
    153.         <el-form-item
    154.           label="入校时间"
    155.           :label-width="formLabelWidth"
    156.           prop="time"
    157.         >
    158.           <el-date-picker
    159.             v-model="newUserForm.time"
    160.             align="right"
    161.             format="yyyy 年 MM 月 dd 日"
    162.             value-format="yyyy/MM/dd"
    163.             type="date"
    164.             placeholder="选择入校日期"
    165.             :picker-options="pickAfter"
    166.           >
    167.           el-date-picker>
    168.         el-form-item>
    169.  
    170.         <el-form-item
    171.           label="家庭住址"
    172.           :label-width="formLabelWidth"
    173.           prop="address"
    174.         >
    175.           <el-input v-model="newUserForm.address" autocomplete="off">el-input>
    176.         el-form-item>
    177.         <el-form-item
    178.           label="联系方式"
    179.           :label-width="formLabelWidth"
    180.           prop="phone"
    181.         >
    182.           <el-input v-model="newUserForm.phone" autocomplete="off">el-input>
    183.         el-form-item>
    184.       el-form>
    185.       <div slot="footer" class="dialog-footer">
    186.         <el-button @click="dialogFormVisible = false">取 消el-button>
    187.         <el-button type="primary" @click="comfirm('newUserForm')"
    188.           >确 定
    189.         >
    190.       div>
    191.     el-dialog>
    192.   div>
    193. template>
    194.  
    195. <script>
    196. import { infoList, UserDel, addInfo } from "@/api/api.js";
    197. import {
    198.   NotNullRule,
    199.   newUsernameRule,
    200.   ageRule,
    201.   phoneRule,
    202. } from "@/utils/validate";
    203. export default {
    204.   data() {
    205.     return {
    206.       tableData: [],
    207.       currentPage: 1, //当前页数
    208.       pageSize: 10, //每页显示条数
    209.       total: 0,
    210.       dialogFormVisible: false,
    211.       formInline: {
    212.         name: "",
    213.       },
    214.       newUserForm: {
    215.         name: "",
    216.         sex: "1",
    217.         age: "",
    218.         father: "",
    219.         mather: "",
    220.         time: "",
    221.         address: "",
    222.         phone: "",
    223.       },
    224.       pickAfter: {
    225.         disabledDate(time) {
    226.           return time.getTime() > Date.now() // 如果没有后面的-8.64e7就是不可以选择今天的
    227.         },
    228.       },
    229.       rules: {
    230.         name: [{ validator: newUsernameRule, trigger: "blur", required:true }],
    231.         sex: [{ validator: NotNullRule, trigger: "blur", required:true }],
    232.         age: [{ validator: ageRule, trigger: "blur", required:true }],
    233.         time: [{ validator: NotNullRule, trigger: "blur", required:true }],
    234.         address: [{ validator: NotNullRule, trigger: "blur", required:true }],
    235.         phone: [{ validator: phoneRule, trigger: "blur", required:true }],
    236.       },
    237.       formLabelWidth: "80px",
    238.     };
    239.   },
    240.   created() {
    241.     this.getData();
    242.   },
    243.   computed: {
    244.     compData() {
    245.       return this.tableData.slice(
    246.         (this.currentPage - 1) * this.pageSize,
    247.         this.currentPage * this.pageSize
    248.       );
    249.     },
    250.     // copDate() {
    251.     //   return new Date().toLocaleDateString();
    252.     // }
    253.   },
    254.   methods: {
    255.     addUser() {
    256.       this.dialogFormVisible = true;
    257.     },
    258.     comfirm(newUserForm) {
    259.       console.log(newUserForm, this.newUserForm);
    260.       this.$refs[newUserForm].validate(valid => {
    261.         if(valid){
    262.           console.log(newUserForm, this.newUserForm)
    263.           addInfo(this.newUserForm).then(res => {
    264.             if(res.data.status === 200){
    265.               this.dialogFormVisible = false
    266.               this.$message({type: 'success', message: res.data.message}
    267.               )
    268.             }
    269.           })
    270.         }
    271.       })
    272.     },
    273.     find() {
    274.       this.getData(this.formInline);
    275.     },
    276.     refresh() {
    277.       this.formInline = {};
    278.       this.getData(this.formInline);
    279.     },
    280.     del(row) {
    281.       console.log(row);
    282.       UserDel(row.id).then((res) => {
    283.         if (res.data.status === 200) {
    284.           this.$message({ message: res.data.message, type: "success" });
    285.           this.getData();
    286.         }
    287.       });
    288.     },
    289.     getData(params) {
    290.       infoList(params).then((res) => {
    291.         console.log(res.data);
    292.         if (res.data.status === 200) {
    293.           this.total = res.data.total;
    294.           this.tableData = res.data.data;
    295.           this.tableData.forEach((item) => {
    296.             item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
    297.             item.state === "1"
    298.               ? (item.state_text = "已入校")
    299.               : item.state === "2"
    300.               ? (item.state_text = "未入校")
    301.               : (item.state_text = "休学中");
    302.           });
    303.         }
    304.       });
    305.     },
    306.     handleSizeChange(val) {
    307.       this.pageSize = val;
    308.       this.currentPage = 1;
    309.     },
    310.     handleCurrentChange(val) {
    311.       this.currentPage = val;
    312.     },
    313.   },
    314. };
    315. script>
    316.  
    317. <style lang="scss">
    318. .InfoList {
    319.   .demo-form-inline {
    320.     text-align: left;
    321.   }
    322.  
    323.   .el-pagination {
    324.     text-align: left;
    325.     margin-top: 20x;
    326.   }
    327. }
    328. style>
    1. //信息列表的
    2. //通用校验——判空
    3. export function NotNullRule(rule, value, callback) {
    4.     if (value === "") {
    5.         callback(new Error("此处不能为空"));
    6.     } else {
    7.         callback();
    8.     }
    9. }
    10. //新增用户的姓名校验
    11. export function newUsernameRule(rule, value, callback) {
    12.     let CName = /^(?:[\u4e00-\u9fa5·]{2,16})$/;
    13.     let EName = /(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/;
    14.     if (value === "") {
    15.         callback(new Error("请输入姓名"));
    16.     } else if (!(CName.test(value) || EName.test(value))) {
    17.         callback(new Error("请输入中文姓名或者20位字母以内的英文名"));
    18.     } else{
    19.         // forbiddenStrRule(rule, value, callback);
    20.         callback();
    21.     }
    22. }
    23. //新增用户的联系方式校验
    24. export function phoneRule(rule, value, callback) {
    25.     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}$/
    26.     if (value === "") {
    27.         callback(new Error("请输入手机号"));
    28.     } else if(!phone.test(value)) {
    29.         callback(new Error("请输入正确的手机号格式"));
    30.     }else{
    31.         callback();
    32.     }
    33. }
    34. //新增用户的年龄校验
    35. export function ageRule(rule, value, callback) {
    36.     //   6-12位密码需要包含大小写字母和数字以及特殊符号
    37.     let age = /^([1-3]|[0-9]{2})$/;
    38.     if (value === "") {
    39.         callback(new Error("请输入年龄"));
    40.     } else if (!age.test(value)) {
    41.         callback(new Error("用户年龄不合理"));
    42.     } else {
    43.         callback();
    44.     }
    45. }
    46. //敏感词过滤
    47. export function forbiddenStrRule(rule, value, callback) {
    48.     //定义敏感字符
    49.     let forbiddenArray = ['xx', '<', '>', '黄色', 'sb', 'fuck', 'md', 'laji', '靠', 'nm', 'tm', 'tmd', 'c'];
    50.     for (var i = 0; i < forbiddenArray.length; i++) {
    51.         if(value.indexOf(forbiddenArray[i])){
    52.             // value = value.replace(forbiddenArray[i], "*");
    53.             callback(new Error("有敏感词，请重新输入。"));
    54.         }else{
    55.             return callback();
    56.         }
    57.     }
    58.     
    59. }
    60. //新增用户的入校时间校验
    61. export function timeRule(rule, value, callback) {
    62.     console.log(value)
    63.     let time = new Date();
    64.     // value.join(" ");
    65.     let year = time.getFullYear().toString();
    66.     let month = (time.getMonth() + 1).toString();
    67.     let date = time.getDate().toString();
    68.     let dateValue = value.split("/");
    69.     console.log(dateValue)
    70.     if (value === "") {
    71.         callback(new Error("请输入入校时间"));
    72.     } else if (year === dateValue[0]) {
    73.         if (month === dateValue[1] && date >= dateValue[2]) {
    74.             console.log("1")
    75.             callback();
    76.         } else if (month > dateValue[1]) {
    77.             console.log("2")
    78.             callback();
    79.         }
    80.     } else if (year > dateValue[0]) {
    81.         console.log(year)
    82.         console.log(dateValue[0])
    83.         console.log("3")
    84.         callback();
    85.     } else {
    86.         callback(new Error("用户选择的时间错误，还未到时间"));
    87.     }
    88. }

     4、封装api请求接口、连接后端

    创建点击事件，对传递数据对象——新建用户信息，进行打印查看。

    点击确定，校验表单：

    发送请求：

     确认后端数据接口添加成功后，应该刷新表单，所以完善一下信息列表的查询接口，与用户列表查询接口相似

    注意这里的性别格式转换的显示问题：因为sex为string类型，所以这里要加 ‘’

    演示：

      弹窗复用修改功能

    ps：动态加载的没有（），不是function，在computed里监控。所以

    连接后端

     由于新增和修改用的是同一个表单，点击的确定按钮 ，就需要先判断是新增还是修改来像后端发起请求，也就是可以根据forrm表单title的状态：真就是修改，假就是新增。

    测试：

    ※ 再修改时，不将数据绑定而是备份，避免不了解计算机原理的用户，在修改表单数据时，列表数据也在同时发生变化，没有点击确定，误以为数据已经修改成功。所以不直接赋值：

    取消按钮：

    InfoList.vue: 

    1. <template>
    2.   <div class="InfoList">
    3.     
    4.     <el-form
    5.       :inline="true"
    6.       :model="formInline"
    7.       class="demo-form-inline"
    8.       size="small"
    9.     >
    10.       <el-form-item>
    11.         <el-input
    12.           v-model="formInline.name"
    13.           prefix-icon="el-icon-search"
    14.           placeholder="请输入姓名"
    15.         >el-input>
    16.       el-form-item>
    17.       <el-form-item>
    18.         <el-button
    19.           @click="find()"
    20.           type="primary"
    21.           icon="el-icon-search"
    22.           circle
    23.           size="small"
    24.         >el-button>
    25.       el-form-item>
    26.       <el-form-item>
    27.         <el-button
    28.           type="success"
    29.           @click="addUser()"
    30.           circle
    31.           size="small"
    32.           icon="el-icon-circle-plus-outline"
    33.         >el-button>
    34.       el-form-item>
    35.       <el-form-item>
    36.         <el-button
    37.           type="success"
    38.           plain
    39.           @click="refresh()"
    40.           circle
    41.           size="small"
    42.           icon="el-icon-refresh"
    43.         >el-button>
    44.       el-form-item>
    45.       <el-form-item>
    46.         <el-button
    47.           type="danger"
    48.           plain
    49.           @click="delPitch()"
    50.           circle
    51.           size="small"
    52.           icon="el-icon-delete"
    53.         >el-button>
    54.       el-form-item>
    55.     el-form>
    56.     
    57.     <el-table
    58.       :data="compData"
    59.       height="450"
    60.       border
    61.       style="width: 100%"
    62.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    63.     >
    64.       
    65.       <el-table-column type="selection" width="55"> el-table-column>
    66.       <el-table-column prop="name" label="姓名" align="center">
    67.       el-table-column>
    68.       <el-table-column prop="sex_text" label="性别" align="center">
    69.       el-table-column>
    70.       <el-table-column prop="age" label="年龄" align="center" sortable>
    71.       el-table-column>
    72.       <el-table-column prop="father" label="父亲" align="center">
    73.       el-table-column>
    74.       <el-table-column prop="mather" label="母亲" align="center">
    75.       el-table-column>
    76.       <el-table-column prop="time" label="入校时间" align="center">
    77.       el-table-column>
    78.       <el-table-column prop="address" label="家庭住址" align="center">
    79.       el-table-column>
    80.       <el-table-column prop="phone" label="联系方式" align="center">
    81.       el-table-column>
    82.       <el-table-column fixed="right" label="操作" width="100" align="center">
    83.         <template slot-scope="scope">
    84.           <el-button
    85.             @click="edit(scope.row)"
    86.             type="primary"
    87.             icon="el-icon-edit"
    88.             circle
    89.             size="mini"
    90.           >el-button>
    91.           <el-button
    92.             @click="del(scope.row)"
    93.             type="danger"
    94.             icon="el-icon-delete"
    95.             circle
    96.             size="mini"
    97.           >el-button>
    98.         template>
    99.       el-table-column>
    100.     el-table>
    101.     <el-pagination
    102.       @size-change="handleSizeChange"
    103.       @current-change="handleCurrentChange"
    104.       :current-page="currentPage"
    105.       :page-sizes="[5, 10, 20, 30, 50]"
    106.       :page-size="pageSize"
    107.       layout="total, sizes, prev, pager, next, jumper"
    108.       :total="total"
    109.     >
    110.     el-pagination>
    111.     <el-dialog
    112.       :title="compTitle"
    113.       :visible.sync="dialogFormVisible"
    114.       width="500px"
    115.     >
    116.       <el-form :model="newUserForm" :rules="rules" ref="newUserForm">
    117.         <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
    118.           <el-input v-model="newUserForm.name" autocomplete="off">el-input>
    119.         el-form-item>
    120.         <el-form-item
    121.           label="性别"
    122.           :label-width="formLabelWidth"
    123.           prop="sex"
    124.           icon="el-icon-male"
    125.         >
    126.           <el-radio v-model="newUserForm.sex" label="1"
    127.             ><i class="el-icon-male">i>男
    128.           >
    129.           <el-radio v-model="newUserForm.sex" label="2"
    130.             ><i class="el-icon-female">i>女
    131.           >
    132.         el-form-item>
    133.         <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
    134.           <el-input v-model="newUserForm.age" autocomplete="off">el-input>
    135.         el-form-item>
    136.         <el-form-item
    137.           label="父亲姓名"
    138.           :label-width="formLabelWidth"
    139.           prop="father"
    140.         >
    141.           <el-input v-model="newUserForm.father" autocomplete="off">el-input>
    142.         el-form-item>
    143.         <el-form-item
    144.           label="母亲姓名"
    145.           :label-width="formLabelWidth"
    146.           prop="mather"
    147.         >
    148.           <el-input v-model="newUserForm.mather" autocomplete="off">el-input>
    149.         el-form-item>
    150.  
    151.         <el-form-item
    152.           label="入校时间"
    153.           :label-width="formLabelWidth"
    154.           prop="time"
    155.         >
    156.           <el-date-picker
    157.             v-model="newUserForm.time"
    158.             align="right"
    159.             format="yyyy 年 MM 月 dd 日"
    160.             value-format="yyyy/MM/dd"
    161.             type="date"
    162.             placeholder="选择入校日期"
    163.             :picker-options="pickAfter"
    164.           >
    165.           el-date-picker>
    166.         el-form-item>
    167.  
    168.         <el-form-item
    169.           label="家庭住址"
    170.           :label-width="formLabelWidth"
    171.           prop="address"
    172.         >
    173.           <el-input v-model="newUserForm.address" autocomplete="off">el-input>
    174.         el-form-item>
    175.         <el-form-item
    176.           label="联系方式"
    177.           :label-width="formLabelWidth"
    178.           prop="phone"
    179.         >
    180.           <el-input v-model="newUserForm.phone" autocomplete="off">el-input>
    181.         el-form-item>
    182.       el-form>
    183.       <div slot="footer" class="dialog-footer">
    184.         <el-button @click="closeForm('newUserForm')">取 消el-button>
    185.         <el-button type="primary" @click="comfirm('newUserForm')"
    186.           >确 定
    187.         >
    188.       div>
    189.     el-dialog>
    190.   div>
    191. template>
    192.  
    193. <script>
    194. import { infoList, UserDel, addInfo, updateInfo } from "@/api/api.js";
    195. import {
    196.   NotNullRule,
    197.   newUsernameRule,
    198.   ageRule,
    199.   phoneRule,
    200. } from "@/utils/validate";
    201. export default {
    202.   data() {
    203.     return {
    204.       tableData: [],
    205.       currentPage: 1, //当前页数
    206.       pageSize: 10, //每页显示条数
    207.       total: 0,
    208.       dialogFormVisible: false,
    209.       formInline: {
    210.         name: "",
    211.       },
    212.       newUserForm: {
    213.         name: "",
    214.         sex: "1",
    215.         age: "",
    216.         father: "",
    217.         mather: "",
    218.         time: "",
    219.         address: "",
    220.         phone: "",
    221.       },
    222.       pickAfter: {
    223.         disabledDate(time) {
    224.           return time.getTime() > Date.now(); // 如果没有后面的-8.64e7就是不可以选择今天的
    225.         },
    226.       },
    227.       rules: {
    228.         name: [{ validator: newUsernameRule, trigger: "blur", required: true }],
    229.         sex: [{ validator: NotNullRule, trigger: "blur", required: true }],
    230.         age: [{ validator: ageRule, trigger: "blur", required: true }],
    231.         time: [{ validator: NotNullRule, trigger: "blur", required: true }],
    232.         address: [{ validator: NotNullRule, trigger: "blur", required: true }],
    233.         phone: [{ validator: phoneRule, trigger: "blur", required: true }],
    234.       },
    235.       formLabelWidth: "80px",
    236.       formState: true,
    237.     };
    238.   },
    239.   created() {
    240.     this.getData();
    241.   },
    242.   computed: {
    243.     compData() {
    244.       return this.tableData.slice(
    245.         (this.currentPage - 1) * this.pageSize,
    246.         this.currentPage * this.pageSize
    247.       );
    248.     },
    249.     compTitle() {
    250.       return this.formState ? "修改用户信息" : "新增用户信息";
    251.     },
    252.   },
    253.   methods: {
    254.     addUser() {
    255.       this.formState = false;
    256.       this.dialogFormVisible = true;
    257.       this.newUserForm = {
    258.         name: "",
    259.         sex: "1",
    260.         age: "",
    261.         father: "",
    262.         mather: "",
    263.         time: "",
    264.         address: "",
    265.         phone: "",
    266.       };
    267.     },
    268.     edit(row) {
    269.       this.formState = true;
    270.       this.dialogFormVisible = true;
    271.       // this.newUserForm =  row;
    272.       this.newUserForm = { ...row };
    273.     },
    274.     comfirm(newUserForm) {
    275.       this.$refs[newUserForm].validate((valid) => {
    276.         if (valid) {
    277.           if (this.formState) {
    278.             updateInfo(this.newUserForm).then((res) => {
    279.               if (res.data.status === 200) {
    280.                 this.getData();
    281.                 this.dialogFormVisible = false;
    282.                 this.$message({ type: "success", message: res.data.message });
    283.               }
    284.             });
    285.           } else {
    286.             addInfo(this.newUserForm).then((res) => {
    287.               if (res.data.status === 200) {
    288.                 this.getData();
    289.                 this.dialogFormVisible = false;
    290.                 this.$message({ type: "success", message: res.data.message });
    291.               }
    292.             });
    293.           }
    294.         }
    295.       });
    296.     },
    297.     closeForm(newUserForm) {
    298.       this.$refs[newUserForm].resetFields();
    299.       this.dialogFormVisible = false;
    300.     },
    301.     find() {
    302.       this.getData(this.formInline);
    303.     },
    304.     refresh() {
    305.       this.formInline = {};
    306.       this.getData(this.formInline);
    307.     },
    308.     del(row) {
    309.       console.log(row);
    310.       UserDel(row.id).then((res) => {
    311.         if (res.data.status === 200) {
    312.           this.$message({ message: res.data.message, type: "success" });
    313.           this.getData();
    314.         }
    315.       });
    316.     },
    317.     getData(params) {
    318.       infoList(params).then((res) => {
    319.         console.log(res.data);
    320.         if (res.data.status === 200) {
    321.           this.total = res.data.total;
    322.           this.tableData = res.data.data;
    323.            this.tableData.forEach((item) => {
    324.              item.sex === '1' ? (item.sex_text = "男") : (item.sex_text = "女");
    325.            });
    326.         }
    327.       });
    328.     },
    329.     handleSizeChange(val) {
    330.       this.pageSize = val;
    331.       this.currentPage = 1;
    332.     },
    333.     handleCurrentChange(val) {
    334.       this.currentPage = val;
    335.     },
    336.   },
    337. };
    338. script>
    339.  
    340. <style lang="scss">
    341. .InfoList {
    342.   .demo-form-inline {
    343.     text-align: left;
    344.   }
    345.  
    346.   .el-pagination {
    347.     text-align: left;
    348.     margin-top: 20x;
    349.   }
    350. }
    351. style>

     api.js

    1. //信息列表
    2. //查询  
    3. export function infoList(param){
    4.     return service({
    5.         method: 'get',
    6.         url: '/info',
    7.         param
    8.     })
    9. }
    10. //新增用户接口
    11. export function addInfo(data){
    12.     data = qs.stringify(data)
    13.     return service({
    14.         method: 'post',
    15.         url: '/info',
    16.         data
    17.     })
    18. }
    19. //修改信息接口
    20. export function updateInfo(data){
    21.     data = qs.stringify(data)
    22.     return service({
    23.         method: 'put',
    24.         url: '/info',
    25.         data
    26.     })
    27. }

    查询、删除单个按钮功能

     

     InfoList.vue

    1. <el-table>
    2.    <el-table-column fixed="right" label="操作" width="100" align="center">
    3.         <template slot-scope="scope">
    4.           <el-button
    5.             @click="del(scope.row)"
    6.             type="danger"
    7.             icon="el-icon-delete"
    8.             circle
    9.             size="mini"
    10.           >el-button>
    11.         template>
    12.     el-table-column>
    13. el-table>
    1.     del(row) {
    2.       console.log(row);
    3.       this.$alert("你确定要删除吗？", "提示", {
    4.         confirmButtonText: "确定",
    5.         callback: () => {
    6.           delInfo(row.id).then((res) => {
    7.             if (res.data.status === 200) {
    8.               this.$message({ message: res.data.message, type: "success" });
    9.               this.getData();
    10.             }
    11.           });
    12.         },
    13.       });
    14.     },

     api.js

    1. //删除信息接口
    2. export function delInfo(id){
    3.     return service({
    4.         method: 'delete',
    5.         url: `/info/${id}`
    6.     })
    7. }

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

    上面有个小问题：

    测试： 

     信息列表的条件查询和批删除因为后端没有写，所以这里只有按钮没有真实现。

  • 相关阅读:
    运维理想和现实，你是？
    React升级到18版本
    SpringCloud - Spring Cloud Netflix 之 Hystrix ；turbine（十）
    一台抵得上多种测量仪器-B1500A半导体参数分析仪
    Fabric.js在vue2中使用
    C#定时任务框架Quartz.NET 简单Demo
    一个AI板卡电脑--香橙派 AIpro
    Docker Compose安装部署Jenkins
    在 ASP.NET Core Web API 中处理 Patch 请求
    （七）五种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • 原文地址：https://blog.csdn.net/qq_45947664/article/details/128048772