Vue_shop学习34：用户列表的ui结构

最新推荐文章于 2024-09-25 09:27:18 发布

¡Venceremo

最新推荐文章于 2024-09-25 09:27:18 发布

阅读量87

点赞数

分类专栏： Vue_shop 文章标签：学习

本文链接：https://blog.csdn.net/weixin_47295886/article/details/130225221

版权

Vue_shop 专栏收录该内容

93 篇文章 3 订阅

订阅专栏

文章展示了如何在Vue.js项目中使用ElementUI库来实现面包屑导航结构，增加底部间距，并创建卡片视图。同时，为了解决搜索框和按钮的布局问题，文章提到了使用ElementUI的栅格系统进行调整，确保按钮能正确显示。

摘要由CSDN通过智能技术生成

面包屑结构（面包屑导航区）

组件 | Element

按需导入 +注册

<template>
    <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>
</template>
<script>
    export default{

    }
</script>
<style lang="less" scoped>
    
</style>

卡片视图区域

组件 | Element

按需导入+引用

    <!-- 卡片视图区域 -->
          <el-card class="box-card">
           123
          </el-card>

距离太近，在全局样式表中面包屑重写+卡片视图重写

/*全局样式表*/
html,
body,
#app {
    height: 100%;
    /*变成父元素的100%q全屏*/
    margin: 0;
    padding: 0;
}

/* 面包屑重写 */
.el-breadcrumb {
    margin-bottom: 15px;
    /*由距离*/
    font-size: 12px;

}

.el-card { /*阴影区域*/
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

搜索框：组件 | Element

      <!-- 搜索和添加区域 -->
            <div style="margin-top: 15px;">
                <el-input placeholder="请输入内容">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>

文本框占具了所有文本区域，后面按钮没地方放，使用elementui提供的栅格系统

组件 | Element

        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="7">
                    <!-- 搜索和添加区域 -->
                    <div>
                        <el-input placeholder="请输入内容">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>
       
        </el-card>

<template>
    <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>
        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="7">
                    <!-- 搜索和添加区域 -->
                    <div>
                        <el-input placeholder="请输入内容">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>
       
        </el-card>

    </div>
</template>
<script>
    export default{

    }
</script>
<style lang="less" scoped>
    
</style>