Vue小模块之功能全面的表格（一）用Element创建基本页面布局

Vue小模块之功能全面的表格（一）用Element创建基本页面布局

技术栈

Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

引入Element

用vue脚手架创建工程

npm i -g vue-cli

vue init webpack vue-table-client

安装element-ui

npm i -s element-ui

引入element

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

如有问题，请参考：
工程创建
Element引入

基本页面

在目录src/components/下创建页面板式ViewPage.vue

span的数值可根据自己屏幕的大小进行调节，24格为一列

<template>
  <el-container>
    <el-header>
      <el-row>
        <!-- 左按钮区 -->
        <el-col :span="2"