Spring Boot Vue Element入门实战 八、静态列表页面

本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766

这篇文章主要介绍一个用户管理页面的列表展示，数据搜索，查询，增删改的实现，当然这些都是静态的，后面会介绍结合后台实现真正的数据交互。

 

页面中间部分主要分为3部分，分别是顶部的搜索，中间的列表，底部的分页，我们先出布局说起

 

（一）新建用户页面

User.vue

<template>
    <div class="mainDiv">
        //布局内容依次写在这里
    </div>
</template>
<style>
.mainDiv{
  min-height: 700px;
  margin: 30px;
  background-color: #fff;
  box-shadow: 0 5px 20px rgba(220,222,231,.65);
  padding: 30px;
}
</style>
<script>
    export default {
        data() {
            return {}
        }
    }
</script>

（二）页面布局（html部分）