表单预验证 树形控件的使用

在element.js内部注册 message,并挂载

import { Message } from 'element-ui'
​
Vue.prototype.$message = Message

自定义表单ref 并绑定点击事件

      <el-form ref="loginFormRef">
         <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

在main.js里面全局封装axios

import axios from 'axios'
​
Vue.prototype.axios = axios
// 设置根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

在methods里面调用 validate 方法

login(){
        //如果符号表单的验证规则,valid为true 否则 false
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return
          //  提交当前form的值
       const { data: res} = await this.axios.post('login',this.form)
       
       if(res.meta.status != 200) return this.$message.error('登录失败');
      //  显示登录成功
       this.$message.success('登录成功');
       console.log(res);
      //  把token的值绑定到sessionStorage里面
      window.sessionStorage.setItem('token',res.data.token)
          //进行路由的跳转
       this.$router.push({
         name: 'Home',
       })
      })
    }

树形控件的使用

      <!-- 这是树形控制 -->
      <!-- data是数据源 prop是绑定的数据对象 show-checkbox是开启复选框 -->
      <el-tree
        :data="rightList"
        :props="defaultProps"
               show-checkbox
      ></el-tree>
 return {
      // 树形控件的绑定对象
      defaultProps:{
        // label是菜单名字
        label: 'authName',
        // children是子组件名称
        children: 'children'
      }
    };

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值