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

引入Element

1、用vue脚手架创建工程
npm i -g vue-cli
vue init webpack vue-table-client
2、安装element-ui
npm i -s element-ui
3、在src/element目录下新建index.js文件，引入element

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

Vue.use(Element)

并在main.js中添加以下代码进行引入
import './element'
4、如有问题，请参考：
工程创建
Element引入

基本页面

5、在目录src/components/下创建页面板式ViewPage.vue
span的数值可根据自己屏幕的大小进行调节，24格为一列

<template>
  <el-container>
    <el-header>
      <el-row>
        <!-- 左按钮区 -->
        <el-col :span="2">
          <slot name="left-field"></slot>
        </el-col>

        <!-- 搜索框 -->
        <el-col :span="4">
          <slot name="search-field"></slot>
        </el-col>

        <!-- 过滤条件区 -->
        <el-col :span="12">
          <slot name="filter-field"></slot>
        </el-col>

        <!-- 右按钮区 -->
        <el-col :span="6">
          <slot name="right-field"></slot>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <!-- 表格区 -->
      <slot></slot>
    </el-main>
  </el-container>
</template>

<script>
export default {}
</script>

<style></style>

6、接下来在目录src/components/下创建数据表格DataTable.vue，将内容嵌入到页面布局的对应slot中

<template>
  <view-page>
    <!-- 左按钮区 -->
    <template slot="left-field">
      <el-button type="danger" icon="el-icon-circle-plus-outline">添加</el-button>
    </template>

    <!-- 搜索框 -->
    <template slot="search-field">
      <el-input suffix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
    </template>

    <!-- 过滤条件区 -->
    <template slot="filter-field">
      <el-select v-model="filterType" placeholder="请选择类型"></el-select>
      <el-date-picker type="daterange" start-placeholder="起始时间" end-placeholder="结束时间"></el-date-picker>
    </template>

    <!-- 右按钮区 -->
    <template slot="right-field">
      <el-button type="primary" icon="el-icon-refresh">刷新</el-button>
      <el-button type="warning" icon="el-icon-upload2">导入</el-button>
      <el-button type="success" icon="el-icon-download">导出</el-button>
    </template>

    <!-- 表格区 -->
    <el-table :data="data"></el-table>
  </view-page>
</template>

<script>
import ViewPage from './ViewPage'
export default {
  components: {
    ViewPage
  },
  data () {
    return {
      data: [],
      filterType: ''
    }
  }
}
</script>

7、最后引入到App.vue中

<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header class="head" height="100px">
      <h2>Vue小模块</h2>
      <h4>功 能 全 面 的 表 格</h4>
    </el-header>

    <!-- 主区域 -->
    <el-main>
      <data-table></data-table>
    </el-main>
  </el-container>
</template>

<script>
import DataTable from './components/DataTable'

export default {
  name: 'App',
  components: {
    DataTable
  }
}
</script>

<style>
.head {
  background-color: #409EFF;
  color: white;
}
</style>

查看效果

8、启动项目
npm run dev
9、效果如下