46.(前端)用户列表布局

1.Breadcrumb 面包屑

1.1什么是面包屑

面包屑最大的作用就是显示当前页面的路径，快速返回之前的任意页面。
上个图大概就能理解了

1.2element-ui面包屑的基本使用方法

导入使用的模块

// src/plugin/elements
import Vue from 'vue'
import {  MenuItem,Breadcrumb, BreadcrumbItem } from 'element-ui'
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.prototype.$msg = Message

加载组件

<!-- src/components/user/User.vue -->
<template>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
</template>

1.3优化面包屑

1.3.1修改边框

/* src/assets/css/global.css */
/* 由于在添加组件过程中发现，html并没有占满整个屏幕，设置全局样式 */
html,body,#app{
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.el-breadcrumb{
    margin-bottom: 20px;
}

1.3当前效果展示

2.Card卡片

2.1 卡片的用途

将信息聚合在卡片容器中展示。

2.2 卡片的使用

导入模块

// src/plugin/elements
import Vue from 'vue'
import { Button, FormItem, Form, Input, Message, Header, Container, Aside, Main } from 'element-ui'
import { Menu, Submenu, MenuItemGroup, MenuItem,Breadcrumb, BreadcrumbItem, Card } from 'element-ui'
Vue.use(Card)
Vue.prototype.$msg = Message

导入组件

<!-- src/components/user/User.vue -->
<template>
    <div>
        </el-breadcrumb>
        <el-card class="box-card">
        </el-card>
    </div>
</template>

2.3对element-ui的Card卡片进行填充

2.3.1填充输入框

<!-- src/components/user/User.vue -->
<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div>
        <el-card class="box-card">
            <el-input placeholder="请输入内容" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </el-card>
    </div>
</div>
</template>

2.3.2使用el-col,el-row修改输入框的大小

导入Col，Row

// src/plugin/elements
import Vue from 'vue'
import { Button, FormItem, Form, Input, Message, Header, Container, Aside, Main } from 'element-ui'
import { Menu, Submenu, MenuItemGroup, MenuItem,Breadcrumb, BreadcrumbItem, Card, Row, Col } from 'element-ui'
// import { Button } from 'element-ui'
Vue.use(Row)
Vue.use(Col)
Vue.prototype.$msg = Message

使用Col，Row

<!-- src/components/user/User.vue -->
<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
        <el-card>
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="请输入内容" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

当前效果展示

2.3.2 填充按钮

<!-- src/components/user/User.vue -->
<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
        <el-card>
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="请输入内容" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline">新增用户</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

2.3.3填充element-ui表格

导入模块

// src/plugin/elements
import Vue from 'vue'
import { Menu, Submenu, MenuItemGroup, MenuItem,Breadcrumb, BreadcrumbItem, Card, Row, Col, Table, TableColumn} from 'element-ui'
Vue.use(Table)
Vue.use(TableColumn)
Vue.prototype.$msg = Message

导入组件

<!-- src/components/user/User.vue -->
<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
        <el-card>
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="请输入内容" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline">新增用户</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-table border style="width:100%">
                            <el-table-column prop="id" label="用户名"></el-table-column>
                            <el-table-column prop="name" label="昵称"></el-table-column>
                            <el-table-column prop="address" label="邮箱"></el-table-column>
                            <el-table-column prop="address" label="电话"></el-table-column>
                            <el-table-column prop="address" label="操作"></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

2.3.4为表格添加分页效果

<!-- src/components/user/User.vue -->
<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
        <el-card>
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="请输入内容" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline">新增用户</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-table border style="width:100%">
                            <el-table-column prop="id" label="用户名"></el-table-column>
                            <el-table-column prop="name" label="昵称"></el-table-column>
                            <el-table-column prop="address" label="邮箱"></el-table-column>
                            <el-table-column prop="address" label="电话"></el-table-column>
                            <el-table-column prop="address" label="操作"></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

3.本节效果展示及完整代码

<!-- src/components/user/User.vue -->
<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
        <el-card>
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="请输入内容" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline">新增用户</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-table border style="width:100%">
                            <el-table-column prop="id" label="用户名"></el-table-column>
                            <el-table-column prop="name" label="昵称"></el-table-column>
                            <el-table-column prop="address" label="邮箱"></el-table-column>
                            <el-table-column prop="address" label="电话"></el-table-column>
                            <el-table-column prop="address" label="操作"></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<style>
    .el-table{
        margin-top: 10px;
    }
</style>

// src/plugin/elements
import Vue from 'vue'
import { Button, FormItem, Form, Input, Message, Header, Container, Aside, Main } from 'element-ui'
import { Menu, Submenu, MenuItemGroup, MenuItem,Breadcrumb, BreadcrumbItem, Card,
     Row, Col, Table, TableColumn, Pagination} from 'element-ui'
// import { Button } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Header)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Main)

Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)
Vue.prototype.$msg = Message

/* src/assets/css/global.css */
/* 由于在添加组件过程中发现，html并没有占满整个屏幕，设置全局样式 */
html,body,#app{
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.el-breadcrumb{
    margin-bottom: 20px;
}

本节内容有一些小报错，下次博客更新！！！！！