• 如何使用element-ui相关组件如：el-select,el-table，el-switch,el-pagination,el-dialog

    element-ui 官方链接：

    组件 | Elementicon-default.png?t=N7T8https://element.eleme.cn/#/zh-CN/component/installation

    el-select

    2.               <template>
    3.                 <el-select v-model="data定义的变量" placeholder="请选择用户类型">
    4.                   <el-option
    5.                     v-for="item in userTypeOptions"
    6.                     :key="item.id"
    7.                     :label="item.roleName"
    8.                     :value="item.id"
    9.                   >
    10.                   el-option>
    11.                 el-select>
    12.               template>

    userTypeOptions后端响应的对象数组数据

    el-table 和 el-switch

    2.       <el-table max-height="420" :data="tableData" stripe style="width: 100%">
    3.         
    4.         
    5.         <el-table-column label="编号" width="140">
    6.           <template slot-scope="scope">
    7.             {{ scope.$index + 1 }}
    8.           template>
    9.         el-table-column>
    10.         <el-table-column prop="userType" label="用户类型" width="160">
    11.         el-table-column>
    12.         <el-table-column prop="account" label="账号" width="160">
    13.         el-table-column>
    14.         <el-table-column prop="userName" label="用户名" width="160">
    15.         el-table-column>
    16.         <el-table-column prop="ctime" label="创建时间" width="160">
    17.           
    18.         el-table-column>
    19.         <el-table-column prop="createdUserId" label="创建人id" width="120">
    20.         el-table-column>
    21.         <el-table-column label="状态" width="100">
    22.           
    23.           <template slot-scope="scope1">
    24.             
    25.             
    26.             <el-switch
    27.               v-model="scope1.row.status" 
    28.               :active-value="1"
    29.               active-color="#ff4949"
    30.               :inactive-value="0"
    31.               inactive-color="#13ce66"
    32.               @change="handleAuthority(scope1.row)"
    33.             >
    34.             el-switch>
    35.           template>
    36.         el-table-column>
    37.         <el-table-column label="操作">
    38.           
    39.           <template slot-scope="scope2">
    40.             <el-button size="mini" @click="handleEdit(scope2.$index, scope2.row)"
    41.               >编辑
    42.             >
    43.             <el-button
    44.               size="mini"
    45.               type="danger"
    46.               @click="handleDelete(scope2.$index, scope2.row)"
    47.               >删除
    48.             >
    49.           template>
    50.         el-table-column>
    51.       el-table>

    表格中添加模板的作用域实现 异步处理

    监听status的状态

    1. //监听启用禁用按钮的状态
    2.     handleAuthority(row) {
    3.       console.log(row);
    4.       console.log(row.status);
    5.       // 发送请求到后端来更新status值
    6.       const newStatus = row.status ? 1 : 0; // 反转status值
    7.       this.updateUserStatus(newStatus, row.id);
    8.     },

    权限修改异步处理:

    1. // //修改权限请求
    2.     updateUserStatus(authority, userId) {
    3.       //开始发送修改请求
    4.       var url = `http://localhost:8080/qy/User/UpdateUserStatus/${authority}/${userId}`;
    5.       var config = {
    6.         headers: {
    7.           //配置请求表头防止后端接收不到data中的参数
    8.           "Content-Type": "application/json",
    9.           // 可以在这里添加其他的header配置
    10.         },
    11.       };
    12.       this.axios
    13.         .get(url, config)
    14.         .then((res) => {
    15.           console.log("修改成功", res);
    16.         })
    17.         .catch((rej) => {
    18.           //请求失败捕获
    19.           console.log(rej);
    20.         });
    21.     },

    el-pagination 分页

    2.       <el-pagination
    3.         @size-change="handleSizeChange"
    4.         @current-change="handleCurrentChange"
    5.         :current-page="pageNo"
    6.         :page-sizes="[7, 14, 21, 28]"
    7.         :page-size="pageSize"
    8.         layout="total, sizes, prev, pager, next, jumper"
    9.         :total="totalParam"
    10.       >
    11.       el-pagination>

    几个监听函数与异步请求

    1. methods: {
    2.     //监听分页条数
    3.     handleSizeChange(val) {
    4.       console.log(`每页 ${val} 条`);
    5.       this.pageSize = val;
    6.       this.selectUser();
    7.     },
    8.     //监听分页条数的改变
    9.     handleCurrentChange(val) {
    10.       console.log(`当前页: ${val}`);
    11.       this.pageNo = val;
    12.       this.selectUser();
    13.     },
    14.     //用户表全查方法
    15.     selectUser() {
    16.       console.log("查询");
    17.       var url = `http://localhost:8080/qy/User/select`;
    18.       var userparam = {
    19.         userType: this.value,
    20.         userName: this.likeUserUserName,
    21.         account: this.likeUserAccount,
    22.       };
    23.       var pageParam = {
    24.         pageNo: this.pageNo,
    25.         pageSize: this.pageSize,
    26.       };
    27.  
    28.       var userDto = {
    29.         pages: pageParam,
    30.         users: userparam,
    31.       };
    32.       userDto = JSON.stringify(userDto);
    33.       var data = userDto;
    34.       var config = {
    35.         headers: {
    36.           //配置请求表头防止后端接收不到data中的参数
    37.           "Content-Type": "application/json",
    38.           // 可以在这里添加其他的header配置
    39.         },
    40.       };
    41.       this.axios
    42.         .post(url, data, config)
    43.         .then((res) => {
    44.           console.log(res);
    45.           //使用res.data.data 获取自己封装的对象中的数据
    46.           console.log("data", res.data.data);
    47.           if (res.data.status == 200) {
    48.             //将响应数据存进数组
    49.             this.tableData = res.data.data.pages;
    50.             //修改后端传递的用户类型
    51.             // 使用forEach函数修改userType属性值
    52.             this.tableData.forEach((item) => {
    53.               // eslint-disable-next-line no-prototype-builtins
    54.               if (item.hasOwnProperty("userType")) {
    55.                 // 在这里修改userType的值，例如将其设置为新值4
    56.                 item.userType =
    57.                   item.userType === 1
    58.                     ? "系统管理员"
    59.                     : item.userType === 2
    60.                     ? "挂号员"
    61.                     : "门诊医师";
    62.               }
    63.             });
    64.             //接收数据库总条数
    65.             this.totalParam = res.data.data.total;
    66.           }
    67.  
    68.           if (res.data.status == -1) {
    69.             //用户未登录重定向到登录页面
    70.             this.$message.error(res.data.msg);
    71.             this.$router.push("/login");
    72.           }
    73.         })
    74.         .catch((rej) => {
    75.           //请求失败捕获
    76.           console.log(rej);
    77.         });
    78.     },
    79.   },

    axios实现发送异步请求

    el-dialog 弹窗

    2.       <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
    3.         <el-form :model="editForm">
    4.           
    5.           <el-input type="hidden" name="id" v-model="editForm.id">el-input>
    6.           <el-form-item label="用户名">
    7.             <el-input v-model="editForm.userName" autocomplete="off">el-input>
    8.           el-form-item>
    9.         el-form>
    10.         
    11.         <div slot="footer" class="dialog-footer">
    12.           <el-button @click="dialogFormVisible = false">取 消el-button>
    13.           <el-button type="primary" @click="submitForm">确 定el-button>
    14.         div>
    15.       el-dialog>
    16.  
    17.       
    18.       <el-dialog title="删除用户" :visible.sync="dialogRemove" width="30%">
    19.         <span>确认要删除用户吗?span>
    20.         
    21.         <span slot="footer" class="dialog-footer">
    22.           <el-button @click="dialogRemove = false">取 消el-button>
    23.           <el-button type="primary" @click="deleteSubmint">确 定el-button>
    24.         span>
    25.       el-dialog>

    监听弹窗

    1. //监听修改代码弹窗
    2.     handleEdit(index, row) {
    3.       console.log(index, row);
    4.       //将查询到的行数据显示到弹窗的表单里  默认显示
    5.       this.editForm = row;
    6.       //显示对话框获取用户输入的信息
    7.       this.dialogFormVisible = true;
    8.     },
    9.     //监听删除代码弹窗
    10.     handleDelete(index, row) {
    11.       console.log(index, row);
    12.       //将查询到的行数据显示到弹窗的表单里  默认显示
    13.       this.deleteForm = row;
    14.       //显示对话框获取用户输入的信息
    15.       this.dialogRemove = true;
    16.     },
  • 相关阅读:
    JUC并发编程——ForkJoin与异步回调
    干货 | 利用 pytest 玩转数据驱动测试框架
    【无标题】
    SpringBoot集成flink
    离线建AC自动机维护子串+线段树维护AC自动机：HDU4117
    rust编译器教我做人，为啥还要学习rust语言，因为想使用rust做一些底层服务，更深入的研究技术。
    一篇文章带你入门vim
    文件上传漏洞(3), 文件上传实战绕过思路, 进阶篇, 代码审计
    【NOI模拟赛】Anaid 的树（莫比乌斯反演，指数型生成函数，埃氏筛，虚树）
    【自然语言处理（NLP）实战】LSTM网络实现中文文本情感分析（手把手与教学超详细）
  • 原文地址：https://blog.csdn.net/qq_58647634/article/details/132775302