关键词：
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-clivue 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)基本页面
在目录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效果如下
vue小模块之功能全面的表格表格数据的excel导入(代码片段)
...Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据库mongodbmongodb工具mongoose上传文件对话框上 查看详情
vue小模块之功能全面的表格对话框的弹出和关闭(代码片段)
...Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据库mongodbmongodb工具mongoose对话框组件创建一个对话 查看详情
vue小模块之功能全面的表格表格数据的excel导出(代码片段)
...Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据库mongodbmongodb工具mongoose服务器端使用of 查看详情
vue小模块之功能全面的表格实现带有数组输入的表单(代码片段)
...Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据库mongodbmongodb工具mongoose输入表单在对话框中 查看详情
vue之element-ui的table表格不能自适应
参考技术A大概我试了一下,有两种方法这样用div去包裹,div设置宽度为100%,表格设置宽度为99.9%,这样就完美解决啦 查看详情
vue中element的table表格导入与导出为excel表格的实现(代码片段)
Vue中element的table表格导入与导出为excel表格的实现一、导入2.1安装xlsx插件2.2新建导入功能组件2.3注册全局的导入excel组件2.4创建导入路由组件2.5封装导入接口实现excel导入2.6导入时间格式的处理二、导出2.1安装excel所需依赖和按需... 查看详情
vue（element）中代码高亮插件全面对比
@[toc]全面对比从活跃方面来看从功能方面来看代码高亮是必须的，社区必须活跃，不然修复bug没有一点点参考，太费时间。自动补全缩进，快捷键操作，搜索和替换等功能不是必须的，如果有，能拿来装逼当然最好，不能也不影... 查看详情
vue之nexttick全面解析
vue的第一篇文章，介绍一下简单的nextTick方法的实现原理简介vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常... 查看详情
vue element ui如何创建多个汇总行
】vueelementui如何创建多个汇总行【英文标题】：vueelementuihowtocreatemultiplesummaryrows【发布时间】：2021-08-1311:55:15【问题描述】：我正在尝试使用元素ui中的数据表组件，但似乎遇到了摘要行功能的问题。似乎您只能创建一个摘要行... 查看详情
day05-项目讲师管理模块前端开发(代码片段)
一、vue-element-admin1.1简介vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。功能：介绍|vue-element-admin功能GitHub地址：https://github.com/PanJiaChen/vue-element-admin... 查看详情
前后端分离之评论功能前端——django+mysql+vue+element+axios(代码片段)
评论系统前端一.导入vue和element用到的组件二.使用element设计页面2.1导航菜单2.2输入框2.3按钮2.4显示评论前言：作者：神的孩子在歌唱这是我听老师讲课做的笔记大家好，我叫陈运智，大家可以叫我智教学视频... 查看详情
$django路飞之小知识回顾,vue之样式element-ui,vue绑定图片--mounted页面挂载--路由携带参数(代码片段)
...直接发axios 二 Vue样式用elemen(jq用bootstap)网站http://element-cn.eleme.io/#/zh-CN/guide/design1emement-ui -下载:npminstallelement-ui -使用:在main.js中配置 importElementUIfrom‘element-ui‘; import‘element-ui/lib... 查看详情
element-ui之树形表格（treetable&&treegrid）(代码片段)
先上图来一波支持无限层级，支持新增子级时自动打开父级，支持编辑时自动打开父级，执行操作时自带动画效果，支持初始化时设置全部打开或者关闭，支持一键展开与关闭丝滑般的无延迟由于基于el-table扩展的，所以当然能... 查看详情
[vue]element-ui使用(代码片段)
element-ui使用创建项目vueinitwebpackhello-vuecdhello-vuenpminstallvue-router--save-devnpmielement-ui-S//element-uinpminstall//安装依赖npminstallsass-loadernode-sass--save-dev//安装sass加载器npmrundev//测试npminstallmoduleName：安装模块到项目目录下npminstall-gmoduleName：... 查看详情
在vue-cli创建的项目中引入element-ui
Element-UI是饿了么前端团队退出了一套基于vue.js开发的UI组件库，在与Vue-cli创建的项目结合时，需要做以下配置： 1.安装loader模块cnpminstallstyle-loader-Dcnpminstallcss-loader-Dcnpminstallfile-loader-D 2.安装Element-UI模块cnpminstallelement-ui- 查看详情
vue-cli3和element做一个简单的登陆页面(代码片段)
1.先用vue-cli3创建一个项目2.安装element模块 全局安装npmielement-ui-S3在main.js引入模块importElementUIfrom‘element-ui‘;import‘element-ui/lib/theme-chalk/index.css‘;Vue.use(ElementUI);4.这里先扩展一个小知识点在package.json文件中找scri 查看详情
vue-element-ui中筛选数组数据，控制表格中某一行不显示
参考技术A由于其他模块跟该页面共用一个接口，该页面不想显示接口中的某一条数据。这样就可以把数据中testName为无的数据给筛选掉达到数据筛选的效果，同时还不影响其他模块调用这个接口 查看详情
vue框架之基础(代码片段)
...Filters）在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它快 查看详情