页面刷新导航选择问题

默认情况：点击后的默认效果

<template>
  <div id="app">
    <el-container>
      <el-header>
        <!-- 导航条 -->
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >

<el-footer>
        版权所有 2006 - 2022 传智专修学院
</el-footer>

5.表格：查询列表

测试页面

基本表格

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" >
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>
<style>
</style>

表格修饰

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border >
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;  //保存选中的数据
    }
  },
  data () {
    return {
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>
<style>
</style>

自定义模板

<template>
  <div>
    <!-- 列表 -->
    <el-table :data="studentList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="sid" label="编号" width="150"></el-table-column>
      <el-table-column prop="sname" label="姓名" width="150"></el-table-column>
      <el-table-column prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column prop="age" label="年龄" width="150"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;  //保存选中的数据
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
  data () {
    return {
      multipleSelection: [],  //多选，选中的数据
      studentList: [
        {
          sid: 's001',
          sname: '张三',
          gender: '男',
          age: 18
        },
        {
          sid: 's002',
          sname: '李思',
          gender: '女',
          age: 21
        }
      ]
    }
  }
}
</script>
<style>
</style>

练习：展示“爱好”信息

studentList: [
        {
sid: 's001',
sname: '张三',
gender: '男',
age: 18,
hobbies: ['抽烟','喝酒','烫头']
        },
        {
sid: 's002',
sname: '李思',
gender: '女',
age: 21,
hobbies: ['抽烟','烫头']
        }
      ]1.

<template><div><!--列表--><el-table :data="studentList"stripeborder@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="sid"label="编号"width="150"></el-table-column><el-table-columnprop="sname"label="姓名"width="150"></el-table-column><el-table-columnprop="gender"label="性别"width="150"></el-table-column><el-table-columnprop="age"label="年龄"width="150"></el-table-column><el-table-columnlabel="爱好"><templateslot-scope="scope"><el-tagtype="warning"v-for="(hobby,index) in scope.row.hobbies" :key="index">{{hobby}}</el-tag></template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></template><script>exportdefault {
methods: {
handleSelectionChange(val) {
this.multipleSelection=val;  //保存选中的数据    },
handleEdit(index, row) {
console.log(index, row);
    },
handleDelete(index, row) {
console.log(index, row);
    }
  },
data () {
return {
multipleSelection: [],  //多选，选中的数据studentList: [
        {
sid: 's001',
sname: '张三',
gender: '男',
age: 18,
hobbies: ['抽烟','喝酒','烫头']
        },
        {
sid: 's002',
sname: '李思',
gender: '女',
age: 21,
hobbies: ['抽烟','烫头']
        }
      ]
    }
  }
}
</script><style>  .el-tag+ .el-tag {
margin-left: 10px;
  }
</style>

总结

条件查询

<!--条件表单start--><el-form :inline="true" :model="studentVo"size="mini"class="demo-form-inline"><el-form-itemlabel="班级"><el-selectv-model="studentVo.cid"placeholder="请选择班级"><el-optionlabel="Java12班"value="c001"></el-option><el-optionlabel="Java34班"value="c002"></el-option></el-select></el-form-item><el-form-itemlabel="姓名"><el-inputv-model="studentVo.name"placeholder="请输入姓名"></el-input></el-form-item><el-form-itemlabel="年龄"><el-col :span="11"><el-inputv-model="studentVo.startAge"placeholder="请输入开始年龄"></el-input></el-col><el-colclass="line" :span="2">-</el-col><el-col :span="11"><el-inputv-model="studentVo.endAge"placeholder="请输入结束年龄"></el-input></el-col></el-form-item><el-form-item><el-buttontype="primary"@click="onSubmit">查询</el-button></el-form-item></el-form><!--条件表单end-->

分页条

<!--分页条start--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange"      :current-page="pageInfo.pageNum"      :page-sizes="[1, 2, 5, 10]"      :page-size="pageInfo.pageSize"layout="total, sizes, prev, pager, next, jumper"      :total="pageInfo.total"></el-pagination><!--分页条end-->

6.表单

简单表单：登录

显示登录页面：Login.vue

<template><el-cardclass="box-card"><el-form :model="user"label-width="80px"ref="loginFormRef"><el-form-itemlabel="用户名"><el-inputv-model="user.username"prefix-icon="el-icon-user"placeholder="请输入用户名"></el-input></el-form-item><el-form-itemlabel="密码"><el-inputv-model="user.password"prefix-icon="el-icon-lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="login">登录</el-button><el-buttontype="info"@click="$refs.loginFormRef.resetFields()">重置</el-button></el-form-item></el-form></el-card></template><script>exportdefault {
data() {
return {
user: {
username: '',
password: ''      }
    }
  },
}
</script><style>  .box-card {
width: 480px;
  }
</style>

复杂表单：注册

<template><el-cardclass="box-card"><el-form :model="user"label-width="80px"ref="loginFormRef"><el-form-itemlabel="用户名"><el-inputv-model="user.username"prefix-icon="el-icon-user"placeholder="请输入用户名"></el-input></el-form-item><el-form-itemlabel="密码"><el-inputv-model="user.password"prefix-icon="el-icon-lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-itemlabel="确认密码"><el-inputv-model="user.repassword"prefix-icon="el-icon-lock"type="password"placeholder="请再次输入密码"></el-input></el-form-item><el-form-itemlabel="生日"><el-date-pickerv-model="user.birthday"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-itemlabel="学历"><el-selectv-model="user.edu"placeholder="请选择你的学历"><el-optionlabel="小班"value="xb"></el-option><el-optionlabel="中班"value="zb"></el-option><el-optionlabel="大班"value="db"></el-option><el-optionlabel="学前班"value="xqb"></el-option></el-select></el-form-item><el-form-itemlabel="性别"><el-radio-groupv-model="user.gender"><el-radiolabel="男"></el-radio><el-radiolabel="女"></el-radio></el-radio-group></el-form-item><el-form-itemlabel="爱好"><el-checkbox-groupv-model="user.hobbies"><el-checkboxlabel="抽烟"name="type"></el-checkbox><el-checkboxlabel="喝酒"name="type"></el-checkbox><el-checkboxlabel="烫头"name="type"></el-checkbox><el-checkboxlabel="蹦迪"name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-itemlabel="婚否"><el-switchv-model="user.marry"></el-switch></el-form-item><el-form-itemlabel="省市县"><el-cascaderv-model="user.city"          :options="cityList"></el-cascader></el-form-item><el-form-item><el-buttontype="primary"@click="login">登录</el-button><el-buttontype="info"@click="$refs.loginFormRef.resetFields()">重置</el-button></el-form-item></el-form></el-card></template><script>exportdefault {
data() {
return {
user: {
username: 'jack',
password: '1234',
repassword: '1234',
birthday: '2020-10-07',
edu: 'db',
gender: '女',
hobbies: ['抽烟','烫头'],
marry: true,
city: ['jiangsu', 'suqian', 'shuyang'],
      },
cityList: [
        {
value: 'jiangsu',
label: '江苏',
children: [
            {
value: 'suqian',
label: '宿迁',
children: [
                {
value: 'shuyang',
label: '沭阳',
                },
                {
value: 'siyang',
label: '泗阳',
                }
              ]
            },
            {
value: 'lianyungang',
label: '连云港',
            }
          ]
        }
      ]
    }
  },
methods: {
login() {
alert('登录中...')
    }
  },
}
</script><style>  .box-card {
width: 480px;
  }
</style>

表单校验

rules: {
校验属性: [  规则1,  规则2, .... ]
}
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' }

<template><el-cardclass="box-card"><el-form :model="user" :rules="rules"label-width="80px"ref="loginFormRef"><el-form-itemlabel="用户名"prop="username"><el-inputv-model="user.username"prefix-icon="el-icon-user"placeholder="请输入用户名"></el-input></el-form-item><el-form-itemlabel="密码"prop="password"><el-inputv-model="user.password"prefix-icon="el-icon-lock"type="password"placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-buttontype="primary"@click="login">登录</el-button><el-buttontype="info"@click="$refs.loginFormRef.resetFields()">重置</el-button></el-form-item></el-form></el-card></template><script>exportdefault {
data() {
return {
user: {
username: '',
password: ''      },
rules: {
username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: `用户名长度必须3-5之间`, trigger: 'blur' }
        ],
password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: `密码长度必须3-5之间`, trigger: 'blur' }
        ]
      }
    }
  },
methods: {
login() {
this.$refs.loginFormRef.validate(valid=> {
if(valid) {
// 校验通过console.info('通过')
        } else {
// 校验未通过console.info('未通过')
        }
      })
    }
  },
}
</script><style>  .box-card {
width: 480px;
  }
</style>