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

導航欄部分

選定menu菜單,選擇豎型樣式的
復制一下

<el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item one</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu>

在Idea里面新建一個components組件用來配置導航欄部分


復制到此區域即可

接著在APP.vue里面進行引入

<template><div > <!-- 頭部--><Header /> <!--主體--><div style="display: flex"> <!-- 側邊欄--><Aside /> <!-- 內容區域--><router-view style="flex: 1" /></div></div></template><style></style><script> import Header from "./components/Header"; import Aside from "./components/Aside";export default {name:"Layout",components:{Header,Aside} }</script>

引入成功
我們也可以對側邊欄的樣式進行一定的修改,比如寬度,分割線什么的

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

主體表格部分

在home.app里面引入表格樣式代碼

并設置一下tableData變量可以自定義用戶數據

data() {return {tableData: []}

添加新增導入按鈕

<div style="margin: 10px 0"><el-button type="primary">新增</el-button><el-button type="success">導入</el-button><el-button type="success">導出</el-button></div>

添加搜索框

利用輸入框的格式

<div style="margin: 10px 0"><el-input v-model="search" placeholder="Please input" /></div>

添加刪除與編輯功能

找到帶有該功能的模板即可

<el-table-column align="right"><template #header></template><template #default="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">刪除</el-button></template></el-table-column>

創建一下method方法:

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

為刪除添加二次確認功能

找到對應的組件
把里面的 el-button 替換一下即可

<el-popconfirm title="Are you sure to delete this?"><template #reference><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">刪除</el-button></template></el-popconfirm>

添加表格分頁功能

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

找到組件

選擇完整功能

<div style="margin: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":currentPage="currentPage":page-sizes="[5, 10, 20]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total= "total"></el-pagination></div>

復制到表格下方位置即可
聲明一下變量與方法:

先默認設置一下

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

最終大體部分框架搭建好啦,后面寫一下后端,完成前后端交互;

總結

以上是生活随笔為你收集整理的从0搭建一个Springboot+vue前后端分离项目(四)利用Element框架搭建页面主体部分表格与侧边栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。