vue学习第三节

接着上节，现在来做右侧内容区域

按照上面的接口

1. 首先还是新建一个页面在views 目录user-list.vue
   这里顺带说一下，我的目录结构是

src
------   assets 存放一些图片资源、js等
------   commponents 一些公共组件
-------------Head.vue 顶部导航
-------------Nav.vue  左侧菜单导航
------   views  放页面
-----------index.vue 首页
-----------user-list.vue用户列表页
-------  App.vue 入口文件
-------  main.js 主配置文件 

1. 编写页面

<template>
    <section>
       <el-col>
          <div>
            <el-form :inline="true" :model="query" class="demo-form-inline" ref="query">
                <el-form-item>
                    <el-input v-model="query.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button>查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button>新增</el-button>
                </el-form-item>
            </el-form>
          </div>
        </el-col>

        <!--列表-->
        <el-col>
            <div class="grid-content bg-purple-light">
                <template>
                    <el-table :data="records" border="">
                        <el-table-column label="索引" type="index" width="70">
                        </el-table-column>
                        <el-table-column label="日期" prop="date" width="180">
                        </el-table-column>
                        <el-table-column label="姓名" prop="name" width="180">
                        </el-table-column>
                        <el-table-column label="地址" prop="address">
                        </el-table-column>
                        <el-table-column inline-template="" label="操作">
                            <el-button>
                                查看详情
                            </el-button>
                    </el-table>
                </template>
            </div>
        </el-col>

        <!--分页-->
        <!-- <div class="toolbar">
            <el-col>
                <div>
                    <template>
                        <div class="block">
                            <el-pagination :current-page="currentPage" :page-size="100" :total="1000" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, prev, pager, next">
                            </el-pagination>
                        </div>
                    </template>
                </div>
            </el-col>
        </div> -->
    </section>
</template>

1. 主入口中使用组件并编写样式

2. 走一波看看效果
   * 写完之后运行起来发现毛效果都没，页面也没有报错，后面发现是样式问题；无奈本人css渣渣 最好的方式就是借助chrome 一点点试咯 后面发现主要是position这个属性，我用的是absolute，换成fixed就好了*