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

Posted 2022-12-13 究极死胖兽

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

效果如下