第一次项目实战（2）

面包屑

面包屑可以显示层级打开的记录

那么就需要动态获得路由的名字，而是在侧边拦目之后才会进行跳转，也就会显示出面包屑。此时就会存在一个问题，那就是侧边栏和面包屑不在一个组件里面。这就涉及到组件之间的通信，这就涉及到vuex的语法。vuex是实现组件之间通信的比较简单的方法。

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'


Vue.use(Vuex)

//创建vuex的实例
export default new Vuex.Store({
    modules: {
        tab
    }
})

代码如上

 state: {
        isCollapse: false,//控制菜单的展开还是收起
        tabList: [
            {
                path: "/",
                name: "home",
                label: "首页",
                icon: "s-home",
                url: "Home/home"
            }
        ],//面包屑的数据 
        menu: []
    },

建立一个tablist对象，当点击侧边的时候，就将对应的对象对象push进去，而面包屑再对于整个数据进行渲染，就完成了面包屑的功能。
为了美观，可以设置最后一个面包屑高亮。

&:last-child {
        .el-breadcrumb__inner {
          color: #fff;
        }
      }

将颜色设置为#fff既可以呈现出白色。
下面的功能就是用户管理界面：

演示效果图如下

要实现提示框

<el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <!-- 用户的表单信息 -->
      <el-form
        ref="form"
        :rules="rules"
        :inline="true"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input placeholder="请输入年龄" v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-DD"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input placeholder="请输入地址" v-model="form.addr"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>

是利用了el-dialog标签 在嵌套上form标签 里面加上 例如左边的就是每个form的项，这个项的形式可以有很多的种类，加上去就形成了form表单。

实现查询功能

想要实现查询功能，就需要了解查询的逻辑，通过一个特殊的数据，也就是每个数据的独特性，在这里我选择了姓名，作为标识符，先看看mock里面的写法

getUserList: config => {
        const { name, page = 1, limit = 20 } = param2Obj(config.url)
        console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
        const mockList = List.filter(user => {
            if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
            return true
        })
        const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
        return {
            code: 20000,
            count: mockList.length,
            list: pageList
        }
    },

可知在mock里面是用name进行判断的，当查询的时候，输入对应的姓名就可以进行查询，

<div class="manage-header">
      <el-button @click="handleAdd" type="primary">+ 新增</el-button>
      <!-- form搜索区域 -->
      <el-form :model="userform" :inline="true">
        <el-form-item>
          <el-input placeholder="请输入名称" v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

onSubmit() {
      this.getList();
    }
  getList() {
      // 获取的列表的数据
      getUser({ params: { ...this.userForm, ...this.pageData } }).then(
        ({ data }) => {
          console.log(data);
          this.tableData = data.list;

          this.total = data.count || 0;
        }
      );
    },

在查询的按钮上绑定一个时间，点击查询就i会触发getlist事件，输入框又绑定了一个数据实现了动态变化（v-model）这样就可以根据输入的姓名进行查询，完成了一个简单的查询的功能。
主要数据的渲染就是用了简单的饿了么组件，没什么好说的。

实现分页

<el-pagination
          layout="prev,pager,next"
          :total="total"
          @current-change="handlePage"
        >
        </el-pagination>

关键点 就是将数据和页面联系起来。
如上的代码 total表示总量，用自带的触发事件绑定handlepage，在将对应的页数传递进去，接下来重新渲染页面。

handlePage(val) {
      this.pageData.page = val;
      this.getList();
    },
``就可以实现页面的跳转了
大体上的功能就完成了！第一次vue项目实战结束