Vue_day07

Vue DAY07

¶Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

基于嵌套路由，实现点击侧边栏动态更新页面的局部内容

一级路由：

http://localhost:8080/login
http://localhost:8080/nav
http://localhost:8080/container

嵌套路由：

嵌套路由可以使用路由的方式来实现一个页面中局部内容的动态更新。该局部内容到底显示什么组件，由路由地址决定。例如：

http://localhost:8080/container/button 看到Container中包含Button组件
http://localhost:8080/container/form   看到Container中包含Form组件
http://localhost:8080/container/table  看到Container中包含Table组件

实现步骤：

1. 设计一套合理的嵌套路由规则。

   http://localhost:8080/container/button 看到Container中包含Button
   http://localhost:8080/container/form   看到Container中包含Form
   http://localhost:8080/container/table  看到Container中包含Table
   

2. 准备3个组件：Button.vue Form.vue Table.vue。

3. 在router/index.js中配置嵌套路由。

4. 在合适的位置，添加占位符：<router-view />。

实现点击左侧边栏菜单项，动态跳转到相应的路由

<el-menu router :default-active="$route.path" >
    <el-menu-item index="/container/button">
        按钮：Button
    </el-menu-item>
    <el-menu-item index="/container/table">
        表格：Table
    </el-menu-item>
    <el-menu-item index="/container/form">
        表单：Form
    </el-menu-item>
</el-menu>

$router 路由管理器 管理所有的路由 (提供了路由跳转等功能)

$route 当前路由对象 只用于描述当前路由 （提供了当前路由信息的访问）

Table表格组件

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="ID" width="180">
      <template slot-scope="scope">
        下标：{{scope.$index}} 显示ID:{{scope.row.id}}   
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="年龄" width="180">
      <template slot-scope="scope">
        {{scope.row.age}} 周岁
      </template>
    </el-table-column>
    <el-table-column label="存款" width="180">
      <template slot-scope="scope">
        ￥{{scope.row.money}}.00 元
      </template>
    </el-table-column>
    <el-table-column prop="married" label="婚姻状况">
      <template slot-scope="scope">
        <el-tag :type="scope.row.married?'success':'danger'">
          {{scope.row.married?'已婚':'未婚'}}
        </el-tag>
        <el-tag v-if="scope.row.married">已婚</el-tag>
        <el-tag v-else type="danger">未婚</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="warning" size="small">修改</el-button>
        <el-button 
            type="danger" 
            size="small"
            @click="delItem(scope.$index)">
            删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {id:1001, name:'亮亮', age:25, money:50, married:true},
        {id:1002, name:'泡泡', age:20, money:5000, married:true},
        {id:1003, name:'小新', age:29, money:100, married:false},
        {id:1004, name:'华哥', age:38, money:10, married:true}
      ]
    };
  },
  methods: {
      /** 删除行  需要传入行索引 */
      delItem(index) {
        this.$confirm('此操作将永久删除该好友, 是否继续?','提示',{
          confirmButtonText: '残忍删除',    
          cancelButtonText: '我再想想',
          type: 'warning'
        }).then(()=>{   // 用户点击了确认
          this.tableData.splice(index, 1)
        }).catch(()=>{  // 用户点击了取消
        
        })
      }
  },
};
</script>

Form表单组件

基本结构如下：

<el-form :model="form" label-width="表单标签文本的宽度">
	<el-form-item label="左侧的标签文本">
    	<el-input v-model="form.name"></el-input>
    </el-form-item>
    .....
    <el-form-item>
    	<el-button>确认注册信息</el-button>
    </el-form-item>
</el-form>

export default {
    data(){
        return {
            form : {
                name:"",
                pwd1:"",
                pwd2:"",
                phone:""
            }
        }
    }
}

ElementUI Form组件的表单验证

1. 当焦点失去时进行表单项的验证。
2. 当点击提交按钮时进行整个表单的验证。