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

最新推荐文章于 2023-07-25 16:35:05 发布

道长道长IOT

最新推荐文章于 2023-07-25 16:35:05 发布

阅读量594

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_56986233/article/details/121853059

版权

在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'
      }
    };