vue前端页面通用模板梳理

最新推荐文章于 2024-08-14 09:11:14 发布

全年无休天天加班

最新推荐文章于 2024-08-14 09:11:14 发布

阅读量4.5k

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41783930/article/details/113624011

版权

本文总结了Vue前端通用模板，旨在加速基础信息管理模块的搭建，包括信息模块列表首页的页面设计、JavaScript和CSS部分，帮助开发者节省时间。

摘要由CSDN通过智能技术生成

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=</