vue前端页面通用模板梳理_vue通用前端模板

vue前端通用模板总结

前言：

总结模板方便自己工作开发中做快速建好基础信息管理模块，从底层做起，哈哈哈，大佬可能觉得这些没啥用，但是这些基本功能能快速搞好就没必要浪费宝贵的时间了不是吗？欢迎大家留言提意见！

1.信息模块列表首页：
页面设计：

<template>
  <div class="app-container">
    <div class="filter-container">
      <!--搜索查询-->
      <el-input v-model="listQuery.searchText" placeholder="提示输入的内容" style="width: 200px;" class="filter-item" @keyup.enter.native="listFilter(listQuery.searchText)"/>
      <!--选择查询-->
      <el-select v-model="listQuery.selections" :placeholder="选项" clearable style="width: 200px;" class="filter-item" @change="searchSelect">
        <el-option v-for="select in schools" :key="select.id" :label="select.name" :value="select.id" />
      </el-select>
      <!--搜索按钮-->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="" @click="search">搜索 </el-button>
      <!--新增按钮-->
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="listAdd">新增</el-button>
      <!--删除按钮-->
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click="listDelete">删除</el-button>
      <!--导入按钮-->
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-download" @click="canImport = true">导入</el-button>
      <!--导出按钮-->
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-upload2" @click="canExport = true">导出</el-button>
    </div>
    <!--动态表格区域-->
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit :height="tableHeight" highlight-current-row style="width: 100%;" @selection-change="selectChange">
      <el-table-column type="selection" align="center" width="50px" />
      <el-table-column align="center" :label="序号" type="index" width="80px" />
      <el-table-column :label="表头" align="center" width="100px">
        <template slot-scope="{row}">
          <span>{
   {
    row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="操作" align="center" width="250px" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="edit(row)">编辑</el-button>
          <el-button type=</
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34