表单验证

简单版

<template>
  <div class="login">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>

      <el-form
          label-width="80px"
          :model="form"
          ref="form">
        <el-form-item label="用户名" prop="username"
                      :rules="[
            {required:true,message:'请输入用户名',trigger:'blur'},
            {min:6,max:12,message:'长度在6-12位字符',trigger:'blur'},
        ]">
          <el-input v-model="form.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password"
                      :rules="[
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:6,max:12,message:'长度在6-12位字符',trigger:'blur'},
        ]">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>

      </el-form>

    </el-card>

  </div>
</template>

<script>
export default {
  data() {

    return {
      form: {
        username: "",
        password: ""
      }
    }

  },
  methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log("验证通过")
          this.axios.post("http://localhost",this.form).then(
              res=>{
                console.log(res)
                if(res.data.status === 200){
                  localStorage.setItem("username",res.data.username)
                  this.$message({
                    message:res.data.message,
                    type:'success'
                  })
                  this.$router.push('/home')
                }
              }
          )
              .catch(err=>{
                console.error(err)
              })
        }else {
          console.error("验证不通过")
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: cadetblue;

  .box-card {
    width: 450px;
    margin: 200px auto;

    .el-button {
      width: 100%;
    }
  }
}

</style>

自定义校验

<template>
  <div class="login">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>

      <el-form
          label-width="80px"
          :model="form"
          :rules="rules"
          ref="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>

      </el-form>

    </el-card>

  </div>
</template>

<script>
export default {
  data() {

    // 验证用户名
    const validateName = (rule, value, callback) => {

      if (value === '') {
        callback(new Error("请输入用户名"))
      } else if (value === '123456') {
        console.log("11111111111")
        callback(new Error('换个用户名,猜到啦'))
      } else {
        callback()
      }
    }

    const validatePassword = (rule, value, callback) => {

      if (value === '') {
        callback(new Error("请输入密码"))
      } else if (!value === '123456') {
        callback(new Error('换个密码,猜到啦'))
      } else {
        callback()
      }
    }
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [{validator: validateName, trigger: 'blur'}],
        password: [{validator: validatePassword, trigger: 'blur'}],
      }
    }

  },
  methods: {
    login(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log("验证通过")
          // this.axios.post("http://localhost", this.form).then(
          //     res => {
          //       console.log(res)
          //       if (res.data.status === 200) {
          //         localStorage.setItem("username", res.data.username)
          //         this.$message({
          //           message: res.data.message,
          //           type: 'success'
          //         })
          //         this.$router.push('/home')
          //       }
          //     }
          // )
          //     .catch(err => {
          //       console.error(err)
          //     })
        } else {
          console.error("验证不通过")
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: cadetblue;

  .box-card {
    width: 450px;
    margin: 200px auto;

    .el-button {
      width: 100%;
    }
  }
}

</style>

自定义校验封装

新建一个vaildate.js

// 用户名匹配
export function nameRule(rule,value,callback){
    if (value === '') {
        callback(new Error("请输入用户名"))
    } else if (value === '123456') {
        console.log("11111111111")
        callback(new Error('换个用户名,猜到啦'))
    } else {
        callback()
    }
}

export function passwordRule(rule,value,callback){
    if (value === '') {
        callback(new Error("请输入密码"))
    } else if (value === '123456') {
        callback(new Error('换个密码,猜到啦'))
    } else {
        callback()
    }
}

<template>
  <div class="login">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>

      <el-form
          label-width="80px"
          :model="form"
          :rules="rules"
          ref="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>

      </el-form>

    </el-card>

  </div>
</template>

<script>
import {nameRule,passwordRule} from "@/utils/vaildate";

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [{validator: nameRule, trigger: 'blur'}],
        password: [{validator: passwordRule, trigger: 'blur'}],
      }
    }

  },
  methods: {
    login(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log("验证通过")
          // this.axios.post("http://localhost", this.form).then(
          //     res => {
          //       console.log(res)
          //       if (res.data.status === 200) {
          //         localStorage.setItem("username", res.data.username)
          //         this.$message({
          //           message: res.data.message,
          //           type: 'success'
          //         })
          //         this.$router.push('/home')
          //       }
          //     }
          // )
          //     .catch(err => {
          //       console.error(err)
          //     })
        } else {
          console.error("验证不通过")
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: cadetblue;

  .box-card {
    width: 450px;
    margin: 200px auto;

    .el-button {
      width: 100%;
    }
  }
}

</style>

遍历路由渲染菜单栏

src>common>menu.vue

<template>

  <div class="menu">

    <el-aside width="200px">

      <el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="cornflowerblue"
          text-color="#fff"
          active-text-color="#ffd04b">
        <template v-for="(item,index) in menus">
          <div>
            <el-submenu :index="index + '' " :key="index" v-if="!item.hidden">
              <template slot="title">
                <i :class="item.iconClass"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group v-for="(child,index) in item.children" :key="index">
                <el-menu-item :index="child.path">
                  <i :class="child.iconClass"></i>
                  {{ child.name }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </template>

      </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data(){
    return{
      menus:[]
    }
  },
  created() {
    console.log(this.$router.options.routes)
    this.menus=this.$router.options.routes
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">

.menu{
  .el-aside{
    height: 100%;
    .el-menu{
      height: 100%;
      .fa{
        margin-right: 10px;
      }
    }

    .el-submenu .el-menu-item{
      min-width: 0;
    }
  }
}
</style>

route.js

import Vue from 'vue'
import Router from 'vue-router'
// import  Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            // 重定向
            redirect:'/login',
            // 路由懒加载
            hidden:true,
            component:()=>import('@/components/Login.vue')
            // 异步组件
        },
        {
            path:'/login',
            name:'Login',
            hidden:true,
            // 路由懒加载
            component:()=>import('@/components/Login.vue')
            // 异步组件
        },
        {
            path:'/home',
            // component:Home
            hidden:true,
            // 路由懒加载
            component:()=>import('@/components/Home.vue')
            // 异步组件
        },
        {
            path:'/home2',
            // component:Home
            hidden:true,
            // 路由懒加载
            component:resolve =>require(['@/components/Home.vue'],resolve)
            // 异步组件
        },
        {
            path:'*',
            hidden:true,
            // 路由懒加载
            component:()=>import('@/components/404.vue')
        },
        {
            path:"/home",
            name:"学生管理",
            iconClass:'fa fa-user',
            // 默认重定向
            redirect:'/home/student',
            component:()=>import('@/components/Home.vue'),
            children:[
                {
                    path:'/home/student',
                    name:'学生列表',
                    iconClass:"fa fa-list",
                    component:()=>import("@/components/students/StudentList.vue")
                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:"fa fa-list",
                    component:()=>import("@/components/students/InfoList.vue")
                },
                {
                    path:'/home/infos',
                    name:'信息管理',
                    iconClass:"fa fa-list-alt",
                    component:()=>import("@/components/students/InfoLists.vue")
                },
                {
                    path:'/home/work',
                    name:'作业列表',
                    iconClass:"fa fa-list-ul",
                    component:()=>import("@/components/students/WorkList.vue")
                },
                {
                    path:'/home/workd',
                    name:'作业管理',
                    iconClass:"fa fa-th-list",
                    component:()=>import("@/components/students/WorkMent.vue")
                }
            ]
        },
        {
            path:"/home",
            name:"数据分析",
            iconClass:'fa fa-bar-chart',
            component:()=>import('@/components/Home.vue'),
            children:[
                {
                    path:'/home/dataview',
                    name:'数据概览',
                    iconClass:"fa fa-list-alt",
                    component:()=>import("@/components/dataAnalysis/DataView.vue")
                },
                {
                    path:'/home/mapview',
                    name:'地图概览',
                    iconClass:"fa fa-list-alt",
                    component:()=>import("@/components/dataAnalysis/MapView.vue")
                },
                {
                    path:'/home/travel',
                    name:'信息管理',
                    iconClass:"fa fa-list-alt",
                    component:()=>import("@/components/dataAnalysis/TraveMap.vue")
                },
                {
                    path:'/home/score',
                    name:'分数地图',
                    iconClass:"fa fa-list-alt",
                    component:()=>import("@/components/dataAnalysis/ScoreMap.vue")
                }
            ]
        },
        {
            path:"/users",
            name:"用户中心",
            iconClass:'fa fa-user',
            component:()=>import('@/components/Home.vue'),
            children:[
                {
                    path:'/users/user',
                    name:'权限管理',
                    iconClass:"fa fa-user",
                    component:()=>import("@/components/users/User.vue")
                }
            ]
        },
    ],
    mode:'history'
})

面包屑的使用

不同的路由,面包屑显示的信息会自动变化 bread.vue

<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
            v-for="(item,index) in $route.matched"
            :key="index"
        >{{item.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>

</style>

home.vue

<template>
  <div class="home">
    <Header></Header>
    <el-container class="content">
      <Menu>menu</Menu>

      <el-container>

        <el-main>
          <Breadcrumb/>
          <div class="cont">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer>
          <Footer></Footer>
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import Header from "@/components/common/Header.vue";
import Footer from "@/components/common/Footer.vue";
import Menu from "@/components/common/Menu.vue";
import Breadcrumb from '@/components/common/Breadcrumb.vue'

export default {
  components: {
    Header,
    Footer,
    Breadcrumb,
    Menu,
  },
  data() {
    return {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.home {
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
    .cont{
      margin: 20px 0;
    }
  }
}

</style>

Card 卡片

<!--    body-style的使用        -->
<el-card :body-style="{padding:'0px'}">  
  <div style="padding-top: 4px;display: flex">  
  </div
</div></el-card>

级联选择器

新版本props的使用级联选择器太高可以在全局样式里给.el-cascader-panel设置高度为200px:props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name', children: 'children' }"

多选框

<div>
    <el-checkbox-group v-model="checkboxGroup1">
        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
</div>

const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data () {
      return {
        checkboxGroup1: ['上海'],
        checkboxGroup2: ['上海'],
        checkboxGroup3: ['上海'],
        checkboxGroup4: ['上海'],
        cities: cityOptions
      };
    }

Avatar 头像

<el-avatar shape="square" size="small" src="https://baidu.com/logo"></el-avatar>

Table 表格

el-table怎样隐藏某一列

el-table-column上添加v-if="false"

    <el-table v-loading="loading" :data="bczglList" @selection-change="handleSelectionChange">
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="班次组编号" align="center" prop="bczbh" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['kqgl:bczgl:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['kqgl:bczgl:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
 

先记着

Vue同一个dom元素绑定多个点击事件如何绑定

<el-button @click="dialogVisible = false;clearTempData()">取 消</el-button>

模板获取值

<template slot-scope="scope">
    <el-tag type="warning" v-for="ids in scope.row.typeID.split(',')">{{getGameType(ids)}}</el-tag>
</template>

Store 数据

agentId: _this.$store.getters.name.agentId,