从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏

https://element-plus.gitee.io/zh-CN/component/menu.html

选定menu菜单,选择竖型样式的
复制一下

  
        
          
          
            item one
            item one
          
          
            item three
          
          
            
            item one
          
        
        
          
          Navigator Two
        
        
          
          Navigator Three
        
        
          
          Navigator Four
        
      

在Idea里面新建一个components组件用来配置导航栏部分


复制到此区域即可

接着在APP.vue里面进行引入

引入成功
我们也可以对侧边栏的样式进行一定的修改,比如宽度,分割线什么的

 style="width: 200px; min-height: calc(100vh - 50px)"

在home.app里面引入表格样式代码

并设置一下tableData变量可以自定义用户数据

data() {
    return {
      tableData: [
          
      ]
    }

      新增
      导入
      导出
    

利用输入框的格式

找到带有该功能的模板即可

创建一下method方法:

methods: {
    handleEdit() {
 
    },
    handleDelete() {

    }
  }

找到对应的组件
把里面的 el-button 替换一下即可

https://element-plus.gitee.io/zh-CN/component/pagination.html

找到组件

选择完整功能

复制到表格下方位置即可
声明一下变量与方法:

先默认设置一下

search:’’,
currentPage: 1,
total: 10,

方法

methods: {
    handleEdit() {

    },
    handleDelete() {

    },
    handleSizeChange() {

    },
    handleCurrentChange(){

    }
  }

详情查看文档

https://element-plus.gitee.io/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7

斑马纹
stripe

按照日期排序
sortable