Vue快速开发一个主页

前言

这里讲述我们如何快速利用Vue脚手架快速搭建一个主页。

页面布局

el-container / el-header / el-aside / el-main:https://element.eleme.cn/#/zh-CN/component/container

bash 复制代码
<el-container>
  <el-header style="background-color: #4c535a">
    
  </el-header>
</el-container>

<el-container>
  <el-aside style="overflow: hidden; min-height: 100vh; background-color: #545c64; width: 250px">
    
  </el-aside>
  <el-main>
    
  </el-main>
</el-container>

顶部栏 header

bash 复制代码
 <el-header style="background-color: #687179">
        <img src="@/assets/logo.png" alt="" style="width: 40px; position: relative; top: 10px;">
        <span style="font-size: 20px; margin-left: 15px; color: white">第一个项目管理</span>
      </el-header>

侧边栏 aside

bash 复制代码
<el-menu default-active="1" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
  <el-menu-item index="1">
    <i class="el-icon-s-home"></i>
    <span slot="title">系统首页</span>
  </el-menu-item>
  <el-submenu index="2">
    <template slot="title">
      <i class="el-icon-location"></i><span>用户管理</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="2-1">管理员信息</el-menu-item>
      <el-menu-item index="2-2">用户信息</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
  <el-submenu index="3">
    <template slot="title">
      <i class="el-icon-location"></i><span>信息管理</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="3-1">xxx信息</el-menu-item>
      <el-menu-item index="3-2">yyy信息</el-menu-item>
    </el-menu-item-group>
  </el-submenu>
</el-menu>

主体结构

把它加入到主体结构中

然后再HomeView中写入这个东西

将菜单切换修改成路由的方式

1.在 el-menu 标签里绑定 default-active 为路由的形式

bash 复制代码
:default-active="$route.path" router

2.然后将 标签里的index属性值设置成对应的路由即可

3.在 index.js 里添加对应路由配置,路由和具体的组件相对应:

4.创建对应的组件(AdminView.vue),编写组件页面对应的代码即可

bash 复制代码
<template>
  <div>
    <template>
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>
  1. 按钮操作
bash 复制代码
<div>
  <el-table :data="tableData" style="width: 100%; margin: 15px 0px">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <el-button type="primary">编辑</el-button>
      <el-button type="danger">删除</el-button>
    </el-table-column>
  </el-table>
</div>
  1. 增加搜索框
bash 复制代码
<div>
  <el-input style="width: 200px; margin-right: 10px" placeholder="请输入内容"></el-input>
  <el-button type="warning">搜索</el-button>
  <el-button type="primary">新增</el-button>
</div>

8.表格数据分页

bash 复制代码
 <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
      </el-pagination>
    </div>

最终效果

相关推荐
你也向往长安城吗11 分钟前
推荐一个三维导航库:three-pathfinding-3d
javascript·算法
karrigan20 分钟前
async/await 的优雅外衣下:Generator 的核心原理与 JavaScript 执行引擎的精细管理
javascript
wycode28 分钟前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
wycode2 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
第七种黄昏2 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
我是哈哈hh2 小时前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清3 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
pepedd8643 小时前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
pepedd8643 小时前
浅谈js拷贝问题-解决拷贝数据难题
前端·javascript·trae
@大迁世界3 小时前
useCallback 的陷阱:当 React Hooks 反而拖了后腿
前端·javascript·react.js·前端框架·ecmascript