vue项目中的elementUI的table组件导出成excel表

1.安装依赖:npm install --save xlsx file-saver 2.在放置需要导出功能的组件中引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.HTML中的设置,简单来说就是给需要导出的table标签el-table上加一个id:如exportTab,对应下面的exportExcel方法中的 document.querySelector('#exportTab') 4.在methods中设置真正实现…

升级vue项目中的element-ui的版本

首先卸载项目中的element-ui 命令为: npm uninstall element-ui / cnpm uninstall element-ui 安装更新最新的element-ui 命令为 npm i element-ui -S / cnpm i element-ui -S (更新想要安装的版本命令为npm install element-ui @2.0.11 -S) 同理更新项目中的node-sass npm uninstall --save node-sasscnpm install…

如何在vue项目中引入elementUI组件

个人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import…

在vue项目中引用element-ui时让el-input 获取焦点的方法

在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取input元素然后使用focus方法还是使用饿了么组件自带的autoFocus都只有在第一次点击按钮的时候可以让Input获得焦点,在不刷新页面的情况下,第二次以后的按钮点击都不会让Input获得焦点.我到现在也没有搞明白这是为什么,猜测了一下是存才一个全局变量,当我们第一次使Input获得焦点以后改变了…

在vue项目中同时使用element-ui和mint-ui,的时候，.babelrc配置文件怎么写

我们安装vue组件库的时候,考虑到大小问题,需要根据需要仅引入部分组件借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的. 但是在配置 .babelrc 文件的时候,可能会有同时引入两个ui组件库该如何实现的疑惑配置 .babelrc 文件单独配置mint-ui的时候 module.exports = { presets: [ '@vue/app', ['es2015', { 'modules': false }] ], 'plugi…

Vue项目中引入ElementUI

前提:创建好的vue项目. 1.安装ElementUI 转到项目根目录,输入命令:#cnpm install element-ui --save-dev 2.在 main.js 引入并注册 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 3.其它: 官网上说“样式文件需要单独引入”,暂时没做这一步,之后出现问题了再来补. 资料: 1.elemen…

vue项目中如何将工具函数模块化导出

如下所示,utils文件夹下的js里都是封装好的工具函数, 如formatDate.js内容如下: export default (day)=>{ var tmpDate = day ? new Date(day) : new Date(); return tmpDate.getFullYear() + '-' + ('0' + (tmpDate.getMonth() + 1)).slice(-2) + '-' + ('0' + tmpDate.getDate()).slice(-2); } g…

在vue项目中使用element-ui的Upload上传组件

<el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess" :beforeUpload="beforeAvatarUpload" &g…

vue项目中引入element-ui时，如何更改主题色

在我们做项目时,我们经常会遇到切换主题色的功能,下面我们就来说一下通过颜色选择器我们就能改变项目的主题颜色代码如下: 颜色选择器所在组件: top-theme.vue内容如下: <template> <el-color-picker size="small" class="theme-picker" popper-class="theme-picker-dropdown" v-model="themeVal"…

iconfont 在vue项目中的应用（icon-component组件）

前言:上一篇记录了iconfont的三种基本使用方法. 在Vue中应该如何使用呐?Vue中的组件化思想很明确,要提高组件的复用率,增强项目的可维护性,扩展性.以下是采用icontfont的使用方式之symbol封装的icon-component组件. //components/Icon-svg //创建 icon-component 组件 <template> <svg class="svg-icon" aria-hidden="true">…

如何在vue项目中引入element-ui

安装 elementUI npm install element-ui --save 引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)…

vue项目中的element-ui地区级联选择器加详细地址push到对象中不显示的问题

想要实现级联选择器el-cascader和输入框el-input共同组成的详细地址,添加数据时弹出el-drawer嵌套el-form弹窗,然后在el-form添加数据提交后push到el-table里,但是发现el-table里面不显示. 话不多说,直接上代码: 1.添加地址按钮 <el-button type="primary" class="btnAdd" @click="dialog = true">添加订单</el-b…

项目中对获取的数据进行下载成Excel表格

//moment是操作日期的插件 //引入lodash是为了方便操作数据 //xlsx是获取表格的必须插件 import moment from 'moment'; import _ from 'lodash'; import xlsx from 'xlsx'; export function exportCsv(originList, originColumns) { //originList, originColumns 分别为你需要下载的数据列表以及数据title //这两条不能…

vue入坑教程（二）在vue项目中如何导入element以及sass

在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其底层原理和bookstrap相似安装 npm install element-ui -S 在package.json中检查是否已经装上element 在main.js中:import ElementUI from 'element-ui' import 'element-ui/lib/theme-…

Vue项目中如何使用Element-UI以及如何使用sass

Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme.io/#/zh-CN.(我在一次跟朋友聊天中得知他们公司前端在使用Element-UI),我在工作中一直在使用Extjs6.0前端框架,作为一个老牌重框架,它自带UI组件,需要什么组件拿来用就好.比如说一个日期插件,找到它的xtype,编写好配置项就好了.因为它的官方文档中也给出了一个较为完整的基…

解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组件的显示隐藏用指令v-if控制,点击父组件的三个按钮,可以控制子组件的显示隐藏,但是子组件不会重新执行生命周期,重新挂载:如图:没有操作按钮时点击中按钮时,也没有刷新,如图; 就这个问题,在子组件加上key唯一项即可: 没改前,子组件使用代码: <ob-tab v-if="showTab&q…

vue项目中设置全局引入scss，使每个组件都可以使用变量

在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass-loader.style-loader npm install node-sass --save-dev npm install sass-loader --save-dev npm install style-loader --save-dev 2: 安装sass-resources-loader…

vue项目中使用组件化开发

最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不太擅长,导致一个页面要写很多的代码,两个不相干的功能写在一个vue文件里总感觉不好,例如有两个弹框,一个是展示某个项目的列表,一个是编辑该项目列表中的某一项的数据,完全可以使用组件来区分开来,各自的功能和参数写在各自的.vue组件里面,然后提供一些接口函数即可,降低了代码的耦合性. 如果有两个组件大…

Vue项目中同级组件传值的例子

大家好,今天给大家带来Vue项目中同级组件之间传值的例子,父子组件之间的通信比较简单,这里不做讨论. 假设该项目中的需求如下: 图中左上角有一个按钮,我们的需求是点击它时,侧边导航栏收缩且主界面放大,如下图所示因为vue项目是组件化的,那么就有组件之间传值的需求了,下面是具体的编码操作: 1. 首先在项目的src路径下创建一个js文件,这里命名为byval.js,在该文件中写入如下代码: /*jslint esversion:6 */ import Vue from 'vue'; export…

使用element-ui的table组件时，渲染为html格式

背景今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式并没有被识别原因在 element-ui 中,table组件默认只渲染文本格式的内容 <div> <el-table :data="articlesData"> <el-table-column prop="title" label="标题" width="140&q…

vue项目中遇到的那些事。

前言有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准…

在 Element-UI 的 Table 组件上添加列拖拽效果

Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup 事件来修改删减 dom 节点但 Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom 而且 Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列表的列…

vue项目中遇到的一些问题

或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-router 路由 es6 eslint Js写法规范. eslint常见问题 brace-style? no-sequences? block-spacing? 比较时,使用全等号所有的switch语句都必须要有一个default分支 yoda:yoda条件语句就是对象字面量应该写在比较操作符的左边…

在vue项目中的axios使用配置记录

默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withC…

vue 项目中实用的小技巧

# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQuery npm install jquery 2.安装Bootstrap npm 以上两步,也可以先在package.json 配置文件中指定版本号,然后运行 npm install 安装完了以后项目是跑不起来的,尽管二者都已经安装成功了,但还是会报错 "Bootstrap's JavaScript…