第一部分：

elementplus官网：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

1、安装elementplus

 npm install element-plus --save

 查看package.json中存在依赖表示成功安装

2、引入elementplus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'





const app = createApp(App)
app.use(ElementPlus)

注意：vue3不支持elementUI，所以选择以下搭配其中之一（这里我选的是2）

（1）vue2+elementUI

（2）vue3+elementPlus

3、使用组件设置布局

点击官网上方菜单栏的组件，点击

点击布局容器可以看到示例，我们选择使用最下面的侧边栏的示例代码

 

Container 布局容器 | Element Plus (element-plus.org)

 查看示例的代码，这里选择手动引入（elementplus还支持自动按需引入）

 代码主要分成四部分，第一部分我们需要放在template里面，第二部分是选择按需部分引入的方式，我们可以不管，第三部分是放在script里的data部分里面也就是提供页面的数据，具体填入形式如下

<script >
export default {
  name: "HomeView",
  data(){
    const item = {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    };
    return {
      tableData : (Array.from({ length: 20 }).fill(item)),
    }
  }
}

</script>

第四部分是页面的样式，不重要，我们可以不使用

引入完成功编译运行后的结果：

4、在asserts文件夹里面创建一个global.css用来书写全局样式

 //global.css

html,body,div{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}

然后再main.js里引入 （不要忘了加 ./ ）

 将所有菜单的高度改成100% 这个时候滚动页面整个页面不会跟随滚动，菜单栏可以单独滚动

自行调整样式后：

第二部分

1、改变e-menu的背景颜色等一些属性

 <el-menu :default-openeds="['1', '3']" style="height: 100%;overflow-x:hidden"
          background-color="rgb(48,65,86)"      //菜单背景设为藏蓝
                   text-color="#fff"            //字体设为白色
                   active-text-color="#ffd04b"  //选中后字体变成黄色
                   :collapse-transition="false"
                   :collapse="isCollapse"  //设置初始被展开的属性为false（初始为折叠）
          >

效果：

 2、添加一些图标

先安装elementPlus图标：

npm install --save @element-plus/icons

到elementPlus官网图标下赋值图标标签代码

Icon 图标 | Element Plus (element-plus.org)

<span>Tom
                <el-icon style="margin-left: 5px">
                  <ArrowDownBold></ArrowDownBold>
                </el-icon>
              </span>

 效果：

 

 

编写收缩的方法

 methods: {
    collapse(){ //点击收缩按钮触发
      this.isCollapse=!this.isCollapse
    }
  }

此时收缩会出现问题，文字没有隐藏，宽度不对 

 所以需要将宽度设为动态的

 然后再将导航的名称都放在span标签里，就会自动收缩进去

然后更改如果收缩了，图标就改变，这里我用v-if和v-else的组合

再结合前面设置的isCollapse状态

使得图标可以切换

 

 效果：

     ------------------》

 

 

3、设置菜单栏标题：

 <div  style="height: 60px;line-height: 60px;text-align: center">
              <img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top:5px;margin-right: 5px">
              <b v-show="!isCollapse" style="color: white">后台管理系统</b>
            </div>

效果：

  ----------------------》

 

 linehight如果设置和垂直高度一致，就会居中，否则就会在上方或者下面

style="line-height: 60px"

效果： 

 ----------》

 

4、 阴影特效：

首先去掉e-menu的边框的颜色

border-right-color: transparent

再在e-side里面添加阴影属性

box-shadow: 2px 0 6px rgb(0 21 41 / 35%)

效果：

 

第三部分

1、设置表格页码数

 进到官网页面，pagination 

Pagination 分页 | Element Plus (element-plus.org)

 copy“完整功能”代码

黏贴在e-mian标签下的e-table下

 <div style="padding: 10px 0">
              <el-pagination
                  v-model:current-page="currentPage4"
                  v-model:page-size="pageSize4"
                  :page-sizes="[100, 200, 300, 400]"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"

              />
            </div>

此时可以看到底部的效果，并且还没有生效

 

2、设置搜索栏（一定要看script里面是否自动导入了输入框图标）

       <el-input style="width: 300px" type="text"  placeholder="请输入名称">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <search></search>
                </el-icon>
              </template>
            </el-input>

            <el-button  class="ml-5" type="" style="color: orangered">搜索</el-button>

效果：

 扩展多个输入框：

 

3、设置表头颜色和边框

 <el-table :data="tableData" border stripe >

<style >
.el-table th{
  background-color: beige !important
}
</style>

效果：

 

4、添加一些按钮：

增删导入导出

 <div style="margin: 10px 0;text-align: left">
            <el-button type="primary">新增
              <el-icon><CirclePlus></CirclePlus></el-icon>
            </el-button>
            <el-button type="danger">批量删除
              <el-icon><remove></remove></el-icon>
            </el-button>
            <el-button type="primary">导入
              <el-icon><bottom></bottom></el-icon>
            </el-button>
            <el-button type="primary">导出
              <el-icon><top></top></el-icon>
            </el-button>
          </div>

表格里的编辑、删除

  <el-table-column  label="操作" >
                <el-table-column>
                  <template>slot-scope="scope"</template>
                  <el-button type="success">编辑
                    <el-icon><edit></edit></el-icon>
                  </el-button>
                  <el-button type="danger">删除
                    <el-icon><remove></remove></el-icon>
                  </el-button>
                </el-table-column>
              </el-table-column>

最后的效果：

5、固定表头优化：

(108条消息) vue项目中table表格固定表头和首尾列_梨城毒妃的博客-CSDN博客_vue固定表头 

   <el-table :data="tableData" border stripe height="500px" max-height="400px" >

 

 至此管理系统的前端雏形已经产生

 

第四部分