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">
          <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>

接下来在目录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>

最后引入到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>

查看效果

启动项目

npm run dev

效果如下