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

element-ui 官方链接：

组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/installation

el-select

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

el-table 和 el-switch

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

监听status的状态

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

el-pagination 分页

几个监听函数与异步请求

methods: {
    //监听分页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.selectUser();
    },
    //监听分页条数的改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.selectUser();
    },
    //用户表全查方法
    selectUser() {
      console.log("查询");
      var url = `http://localhost:8080/qy/User/select`;
      var userparam = {
        userType: this.value,
        userName: this.likeUserUserName,
        account: this.likeUserAccount,
      };
      var pageParam = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };

      var userDto = {
        pages: pageParam,
        users: userparam,
      };
      userDto = JSON.stringify(userDto);
      var data = userDto;
      var config = {
        headers: {
          //配置请求表头防止后端接收不到data中的参数
          "Content-Type": "application/json",
          // 可以在这里添加其他的header配置
        },
      };
      this.axios
        .post(url, data, config)
        .then((res) => {
          console.log(res);
          //使用res.data.data 获取自己封装的对象中的数据
          console.log("data", res.data.data);
          if (res.data.status == 200) {
            //将响应数据存进数组
            this.tableData = res.data.data.pages;
            //修改后端传递的用户类型
            // 使用forEach函数修改userType属性值
            this.tableData.forEach((item) => {
              // eslint-disable-next-line no-prototype-builtins
              if (item.hasOwnProperty("userType")) {
                // 在这里修改userType的值，例如将其设置为新值4
                item.userType =
                  item.userType === 1
                    ? "系统管理员"
                    : item.userType === 2
                    ? "挂号员"
                    : "门诊医师";
              }
            });
            //接收数据库总条数
            this.totalParam = res.data.data.total;
          }

          if (res.data.status == -1) {
            //用户未登录重定向到登录页面
            this.$message.error(res.data.msg);
            this.$router.push("/login");
          }
        })
        .catch((rej) => {
          //请求失败捕获
          console.log(rej);
        });
    },
  },

axios实现发送异步请求

el-dialog 弹窗

      
        
          
          
          
            
          
        
        
        

          取 消
          确 定
        
      

      
      
        确认要删除用户吗?
        
        
          取 消
          确 定
        
      

监听弹窗

//监听修改代码弹窗
    handleEdit(index, row) {
      console.log(index, row);
      //将查询到的行数据显示到弹窗的表单里  默认显示
      this.editForm = row;
      //显示对话框获取用户输入的信息
      this.dialogFormVisible = true;
    },
    //监听删除代码弹窗
    handleDelete(index, row) {
      console.log(index, row);
      //将查询到的行数据显示到弹窗的表单里  默认显示
      this.deleteForm = row;
      //显示对话框获取用户输入的信息
      this.dialogRemove = true;
    },