Laughing
有钱终成眷属，没钱亲眼目睹
搜索到
103
篇与
的结果
-
vue状态管理与vuex 安装vuexnpm i vuex -s创建数据仓库创建store文件夹，并在文件夹下创建index.js文件import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++, decrement: state => state.count-- } })引入数据仓库在main.js中引入我们定义的数据仓库。import Vue from 'vue' import App from './App.vue' import store from '@/store' new Vue({ el: '#app', store, render: h => h(App) })使用<template> <div id="app"> {{ count }} <button @click="increment">++</button> <button @click="decrement">--</button> </div> </template> <script> import popup from "./components/popup.vue"; export default { components: { popup }, name: "app", data() { return {}; }, mounted: function () {}, computed: { count() { return this.$store.state.count; }, }, methods: { increment: function () { this.$store.commit('increment') }, decrement: function () { this.$store.commit('decrement') }, }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>每次点++按钮，count自动+1 -
vue基础之slot内容分发（插槽） 什么是slotslot的官方定义是用于组件内容分发，简单通俗的解释就是在组件化开发中，虽然组件都是一样的，但是在不同的使用场景，组件的某一部分需要有不同的内容显示（slot还有一个形象的名字“插槽”），slot就好比在组件开发过程中定义的一个参数（通过name值来区分），如果不传入值就当默认值使用，如果传入了新值，在组件调用时就会替换定义时的slot默认值。slot分为以下两类":匿名slot具名slot匿名slot匿名slot顾名思义就是没有名字的插槽，特点是可以放任何内容。首先设想一个弹出提示框的场景，提示框都包含头部、中间内容和底部内容三部分。一般情况下头部、底部是固定不变的，只有中间内容可以任意放置。下面我们我们基于以上场景说一下匿名插槽的使用。新建组件我们创建一个名称为popup.vue的组件。<template> <div> <div>这是标题</div> <slot>这部分内容会被替换</slot> <div>这是底部内容</div> </div> </template> <script> export default {}; </script>引用组件我们在app.vue中引入刚才定义的组件。不替换插槽内容我们先只引入组件，不替换slot的内容<template> <div id="app"> <popup> </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>可以看到，slot显示的是默认的内容。替换插槽内容这一次，我们替换slot的内容，修改app.vue如下<template> <div id="app"> <popup> 这部分内容会被替换 </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>再次运行，查看内容可以看到，slot内容被替换成了我们app.vue中的内容。{message type="success" content="一个组件中，如果有多个匿名的slot，那么所有的slot都会被替"/}具名slot正如上面提到的，一个组件中，如果有多个匿名的slot，那么所有的slot都会被替换，还是上面的场景，如果我们的标题、中间部分及底部都是可替换的，显然匿名slot就无法解决我们的问题。针对这个场景，我们就可以使用具名slot。具名slot就是有名字的插槽，一旦有了名字，我们就可以针对特定的插槽进行替换。修改popup.vue组件这次，我们把标题、中间部分及底部都做成插槽。<template> <div> <slot name="title">这是标题</slot> <slot name="content">这部分内容会被替换</slot> <slot name="footer">这是底部内容</slot> </div> </template> <script> export default {}; </script>修改app.vue<template> <div id="app"> <popup> <div slot="title">这是替换后的标题</div> <div slot="content">这是替换后的内容</div> <!-- 不替换底部，显示的是默认值 --> </popup> </div> </template> <script> import popup from './components/popup.vue'; export default { components: { popup }, name: "app", data() { return { msg: "Welcome to Your Vue.js App1", }; }, mounted: function () {}, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 可以看到，替换的内容正确显示，没替换的内容显示了默认值。
-
console.log()输出多彩信息 平时我们在前端打印日志，可能直接就是使用console.log()，其实console.log()有很多有趣（也可能无用）的用法。下面我们介绍一下通过console.log()输出多彩日志。console.log()可以通过'%c'输出标准的css样式。console.log("%cMy stylish message", "color: red; font-style: italic"); console.log( "%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em" ); console.log( "%cRainbow Text ", "background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;" ); console.log("%c香草物语", "color:#fff; background: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3); padding: 8px 15px; border-radius: 0 15px 0 15px");
-
Vue.use()的用法 介绍在vue的main.js中，我们经常使用Vue.use(xx)方法。比如我们引入elementUI，在main.js中，我们一般通过如下代码引入：import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI){message type="error" content="需要先通过npm i element-ui -S安装elementUI"/}原来在开发时，一直都是这么用，但是基本没留意过为什么这么弄。官方解释安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。什么意思呢？Vue.use() 中的参数必须是一个function函数或者是一个Object对象，如果是对象的话，必须在对象中提供一个install方法。之后会将 Vue 作为参数传入。我们分两点来看：如果Vue.use() 中的参数是一个function函数，那么函数的参数是Vue对象。2. 如果Vue.use() 中的参数是一个Object对象，那么这个对象必须提供一个install方法，install方法的参数就是Vue。Demo演示我们通过以下两个Demo来分别演示一下上面说的两种情况。Object对象我们通过自定义一个主键的形式进行演示说明。创建项目vue init webpack-simple custom-global-component一路回车，然后执行npm run dev如果项目能正常启动代表创建成功。创建组件创建components文件夹，并创建loading.vue及index.js文件。目录结构如下loading.vue只是一个简单的组件，代码如下<template> <div> Laoding... </div> </template> <script> export default { } </script>在index.js，我们引入并注册定义的组件。import LoadingComponent from './loading.vue' const Loading = { install:function(Vue){ Vue.component('Loading',LoadingComponent) } } export default Loading在main.js中通过Vue.use()调用。import Loading from './components/loading' Vue.use(Loading)使用在App.vue中使用我们的组件。<template> <div id="app"> <Loading/> </div> </template>function函数创建函数function demo(Vue){ console.log(Vue) } export default demo引入在main.js中引入函数。import demo from './utils/func' Vue.use(demo)
-
vue使用axios配置跨域 开发环境中，我们一般通过两种方式解决跨域：让后端设置CORS，允许我们请求。前端在webpack中设置proxyTable{}代理。后端地址我们这里简单模拟一下后台就可以了，请求路径为http://localhost:8080/normal前端配置安装axios通过npm安装axiosnpm install axios --save配置main.jsimport axios from 'axios' Vue.prototype.$axios = axios axios.defaults.baseURL = '/api'修改代理打开vue项目config文件夹下的index.js在里面把proxyTable: {}设置如下proxyTable: { '/api': { target:'http://localhost:8080', // 请求后台的地址 changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite:{ // 路径重写， '^/api': '' // 替换target中的请求地址，相当于前台请求/api/xx会替换成http://localhost:8080/xx。 } } },测试 this.$axios.get('/normal').then(res=>{ console.log(res) })
-
-
微信公众号开发之回复用户留言 在微信公众号开发之公众号基础配置一文中，我们介绍了如何对微信公众号进行基础配置。下面基于李森的博客的一个需求说明一下如何实现公众号用户的回复开发。需求描述用户给公众号发送消息时，我们查询博客的内容，然后回复给用户。代码实现其实用户回复的请求，跟微信公众号开发之公众号基础配置中配置的URL是一致的。区别在于我们在微信公众号开发之公众号基础配置中配置的请求是GET请求，用户回复的时候，微信会通过POST请求到后台。定义Controller相应微信请求POST请求定义其实没啥特别的，代码如下 @PostMapping("official") public void post(HttpServletRequest request, HttpServletResponse response) { try { request.setCharacterEncoding("UTF-8"); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } response.setCharacterEncoding("UTF-8"); // 调用核心业务类接收消息、处理消息 // String respMessage = weixinPost(request); String respMessage = messageService.newMessageRequest(request); // 响应消息 PrintWriter out = null; try { out = response.getWriter(); out.print(respMessage); } catch (IOException e) { e.printStackTrace(); logger.error(e.getMessage()); } finally { out.close(); out = null; } }封装实体封装消息基础实体BaseMessage.java/** * 微信自动回复消息封装 */ @Data public class BaseMessage { // 开发者微信号 private String ToUserName; // 发送方帐号（一个OpenID） private String FromUserName; // 消息创建时间 （整型） private long CreateTime; // 消息类型（text/image/location/link） private String MsgType; // 消息id，64位整型 private long MsgId; /** * 位0x0001被标志时，星标刚收到的消息 */ private int FuncFlag; }封装普通文本消息实体TextMessage.java@EqualsAndHashCode(callSuper = true) @Data public class TextMessage extends BaseMessage{ // 消息内容 private String Content; }封装图文消息实体Article.java@Data public class Article { /** * 图文消息描述 */ private String Description; /** * 图片链接，支持JPG、PNG格式，<br> * 较好的效果为大图640*320，小图80*80 */ private String PicUrl; /** * 图文消息名称 */ private String Title; /** * 点击图文消息跳转链接 */ private String Url; }封装多条图文消息实体'NewsMessage.java'@EqualsAndHashCode(callSuper = true) @Data public class NewsMessage extends BaseMessage{ /** * 图文消息个数，限制为10条以内 */ private Integer ArticleCount; /** * 多条图文消息信息，默认第一个item为大图 */ private List<Article> Articles; }封装工具类我们需要将实体转换成xml结构，微信消息都是通过xml格式进行数据交互的。public class MessageUtil { /** * 返回消息类型：文本 */ public static final String RESP_MESSAGE_TYPE_TEXT = "text"; /** * 返回消息类型：音乐 */ public static final String RESP_MESSAGE_TYPE_MUSIC = "music"; /** * 返回消息类型：图文 */ public static final String RESP_MESSAGE_TYPE_NEWS = "news"; /** * 请求消息类型：文本 */ public static final String REQ_MESSAGE_TYPE_TEXT = "text"; /** * 请求消息类型：图片 */ public static final String REQ_MESSAGE_TYPE_IMAGE = "image"; /** * 请求消息类型：链接 */ public static final String REQ_MESSAGE_TYPE_LINK = "link"; /** * 请求消息类型：地理位置 */ public static final String REQ_MESSAGE_TYPE_LOCATION = "location"; /** * 请求消息类型：音频 */ public static final String REQ_MESSAGE_TYPE_VOICE = "voice"; /** * 请求消息类型：推送 */ public static final String REQ_MESSAGE_TYPE_EVENT = "event"; /** * 事件类型：subscribe(订阅) */ public static final String EVENT_TYPE_SUBSCRIBE = "subscribe"; /** * 事件类型：unsubscribe(取消订阅) */ public static final String EVENT_TYPE_UNSUBSCRIBE = "unsubscribe"; /** * 事件类型：CLICK(自定义菜单点击事件) */ public static final String EVENT_TYPE_CLICK = "CLICK"; /** * xml转换为map * * @param request * @return * @throws IOException */ public static Map<String, String> xmlToMap(HttpServletRequest request) throws IOException { Map<String, String> map = new HashMap<String, String>(); SAXReader reader = new SAXReader(); InputStream ins = null; try { ins = request.getInputStream(); } catch (IOException e1) { e1.printStackTrace(); } Document doc = null; try { doc = reader.read(ins); Element root = doc.getRootElement(); List<Element> list = root.elements(); for (Element e : list) { map.put(e.getName(), e.getText()); } return map; } catch (DocumentException e1) { e1.printStackTrace(); } finally { ins.close(); } return null; } /** * @param @param request * @param @return * @param @throws Exception * @Description: 解析微信发来的请求（XML） */ public static Map<String, String> parseXml(HttpServletRequest request) throws Exception { // 将解析结果存储在HashMap中 Map<String, String> map = new HashMap<String, String>(); // 从request中取得输入流 InputStream inputStream = request.getInputStream(); // 读取输入流 SAXReader reader = new SAXReader(); Document document = reader.read(inputStream); // 得到xml根元素 Element root = document.getRootElement(); // 得到根元素的所有子节点 List<Element> elementList = root.elements(); // 遍历所有子节点 for (Element e : elementList) map.put(e.getName(), e.getText()); // 释放资源 inputStream.close(); inputStream = null; return map; } // public static XStream xstream = new XStream(); /** * 文本消息对象转换成xml * * @param textMessage 文本消息对象 * @return xml */ public static String textMessageToXml(TextMessage textMessage) { // XStream xstream = new XStream(); xstream.alias("xml", textMessage.getClass()); return xstream.toXML(textMessage); } /** * @param @param newsMessage * @param @return * @Description: 图文消息对象转换成xml */ public static String newsMessageToXml(NewsMessage newsMessage) { xstream.alias("xml", newsMessage.getClass()); xstream.alias("item", new Article().getClass()); return xstream.toXML(newsMessage); } /** * 对象到xml的处理 */ private static XStream xstream = new XStream(new XppDriver() { public HierarchicalStreamWriter createWriter(Writer out) { return new PrettyPrintWriter(out) { // 对所有xml节点的转换都增加CDATA标记 boolean cdata = true; @SuppressWarnings("rawtypes") public void startNode(String name, Class clazz) { super.startNode(name, clazz); } protected void writeText(QuickWriter writer, String text) { if (cdata) { writer.write("<![CDATA["); writer.write(text); writer.write("]]>"); } else { writer.write(text); } } }; } }); }封装服务层 /** * 微信公众号处理 * * @param request * @return */ @Override public String newMessageRequest(HttpServletRequest request) { String respMessage = null; try { // xml请求解析 Map<String, String> requestMap = MessageUtil.xmlToMap(request); // 发送方帐号（open_id） String fromUserName = requestMap.get("FromUserName"); // 公众帐号 String toUserName = requestMap.get("ToUserName"); // 消息类型 String msgType = requestMap.get("MsgType"); // 用户发送的消息消息内容 String content = requestMap.get("Content"); logger.info("FromUserName is:" + fromUserName + ", ToUserName is:" + toUserName + ", MsgType is:" + msgType + ",content:" + content); // 文本消息 if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_TEXT)) { logger.info("进入方法内"); QueryWrapper<TypechoContents> queryWrapper = new QueryWrapper<>(); queryWrapper.lambda() .like(TypechoContents::getTitle, content) .or() .like(TypechoContents::getText, content); List<TypechoContents> typechoContentsList = typechoContentsMapper.selectTypechoContentsList(content); logger.info("数据查询完成：" + typechoContentsList.size()); if (typechoContentsList.size() <= 0) { //自动回复 TextMessage text = new TextMessage(); String string = "未找到要查询的内容，请换个关键字试试"; text.setContent(string); text.setToUserName(fromUserName); text.setFromUserName(toUserName); text.setCreateTime(new Date().getTime()); text.setMsgType(msgType); respMessage = MessageUtil.textMessageToXml(text); return respMessage; } else if (typechoContentsList.size() > 1) { TextMessage text = new TextMessage(); StringBuilder stringBuilder = new StringBuilder("搜索到以下内容：\r\n"); for (TypechoContents typechoContents : typechoContentsList) { stringBuilder.append("<a href='https://lisen.cc/").append(typechoContents.getCategory()).append("/").append(typechoContents.getSlug()).append(".html'>").append(typechoContents.getTitle()).append("</a>"); stringBuilder.append("\r\n"); } text.setContent(stringBuilder.toString()); text.setToUserName(fromUserName); text.setFromUserName(toUserName); text.setCreateTime(new Date().getTime()); text.setMsgType(msgType); respMessage = MessageUtil.textMessageToXml(text); return respMessage; } else { //一条回复图文消息 NewsMessage newsMessage = new NewsMessage(); newsMessage.setArticles(new ArrayList<>()); newsMessage.setArticleCount(typechoContentsList.size()); newsMessage.setToUserName(fromUserName); newsMessage.setFromUserName(toUserName); newsMessage.setCreateTime(new Date().getTime()); newsMessage.setMsgType("news"); for (TypechoContents typechoContents : typechoContentsList) { Article article = new Article(); article.setUrl("https://lisen.cc/" + typechoContents.getCategory() + "/" + typechoContents.getSlug() + ".html"); article.setDescription(typechoContents.getTitle()); List<String> imageUrlList = MessageUtil.getMatchString(typechoContents.getText()); if (imageUrlList.size() <= 0) { article.setPicUrl("https://lisen.cc/usr/themes/lisen/assets/img/logo.png"); } else { logger.info(imageUrlList.get(0)); article.setPicUrl(imageUrlList.get(0)); } article.setTitle(typechoContents.getTitle()); newsMessage.getArticles().add(article); } respMessage = MessageUtil.newsMessageToXml(newsMessage); return respMessage; } } // 事件推送 else if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_EVENT)) { String eventType = requestMap.get("Event");// 事件类型 // 订阅 if (eventType.equals(MessageUtil.EVENT_TYPE_SUBSCRIBE)) { //文本消息 TextMessage text = new TextMessage(); logger.info(LiSenConfig.getResp()); text.setContent(LiSenConfig.getResp().replace("<br/>","\n")); text.setToUserName(fromUserName); text.setFromUserName(toUserName); text.setCreateTime(new Date().getTime()); text.setMsgType(MessageUtil.RESP_MESSAGE_TYPE_TEXT); respMessage = MessageUtil.textMessageToXml(text); return respMessage; } // 取消订阅后用户再收不到公众号发送的消息，因此不需要回复消息 else if (eventType.equals(MessageUtil.EVENT_TYPE_UNSUBSCRIBE)) {// 取消订阅 } } } catch (Exception e) { logger.error("error......"); } return respMessage; }
-
npm替换淘宝源 由于node下载第三方依赖包是从国外服务器下载，虽然没有被墙，但是下载的速度是非常的缓慢且有可能会出现异常。所以为了提高效率，我们还是把npm的镜像源替换成淘宝的镜像源。有几种方式供我们选择使用cnpm使用阿里定制的cnpm命令行工具代替默认的npm，输入以下代码$ npm install -g cnpm --registry=https://registry.npm.taobao.org检测是否安装成功$ cnpm -v安装成功之后，以后安装依赖包的方式和npm的是一样的，只是npm的命令换成是cnpm就可以了假如你已经习惯了使用npm的安装方式的，不想去下载阿里的cnpm命令工具的话，很简单，我们直接将node的仓库地址换成淘宝仓库地址即可单次使用$ npm install --registry=https://registry.npm.taobao.org永久使用在开发react-native的时候，不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别。所以，为了方便开发，我们最好是直接永久使用淘宝的镜像源直接命令行的设置$ npm config set registry https://registry.npm.taobao.org手动修改设置1.打开.npmrc文件（C:\Program Files\nodejs\node_modules\npm\npmrc，没有的话可以使用git命令行建一个( touch .npmrc)，用cmd命令建会报错） 2.增加 registry =https://registry.npm.taobao.org 即可。检测是否修改成功// 配置后可通过下面方式来验证是否成功 npm config get registry // 或 npm info express注：如果想还原npm仓库地址的话，只需要在把地址配置成npm镜像就可以了npm config set registry https://registry.npmjs.org/
-
百度地图标记色块 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OzWSumAeRHXvCB0aVy1NiIywdsxMhIGZ"> </script> </head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMapGL.Map("container"); // 创建地图实例 var point = new BMapGL.Point(117.164254,36.661088); // 创建点坐标 map.centerAndZoom(point, 18); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 // 初始化地图，设置中心点坐标和地图级别 map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式 var polygon = new BMapGL.Polygon([ new BMapGL.Point(117.163848,36.660984), new BMapGL.Point(117.164566,36.66126), new BMapGL.Point(117.164634,36.661155), new BMapGL.Point(117.163919,36.660876) ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:1,fillColor:"red"}); map.addOverlay(polygon); </script> </body> </html>坐标点越多形状越精确。
-
Vue子组件的索引 在Vue中，当子组件较多时，通过this.$children来一一遍历我们需要的一个组件是比较困难的，尤其是组件动态渲染时，他们的序列是不固定的。Vue提供了子组件索引的方法，用特殊的属性ref为子组件指定一个索引的名字。<html> <head> <title>Vue学习</title> <script src="vue.js"></script> </head> <body> <div id="app"> <component-a ref="compA"></component-a> <button @click="handleMessage">获取组件A的内容</button> {{message}} </div> <script type="text/javascript"> Vue.component("component-a", { data: function () { return { message: '这是组件A的message' } }, template:'<div></div>' }) var app = new Vue({ el: '#app', data: { message: '' }, methods: { handleMessage: function () { this.message = this.$refs.compA.message } } }) </script> </body> </html>
-
Vue中文输入法实时更新数据值 使用v-model是，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新，如果希望总是实时更新，可以用@input来替代v-model。<html> <head> <title>Vue学习</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="请输入"> <input type="text" placeholder="实时更新" @input="handleInput"> <p> {{message}} </p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: '' }, methods:{ handleInput:function(e){ this.message=e.target.value } } }) </script> </body> </html>
-
Vue+element-ui导出el-table中的数据 1.先安装依赖npm install --save xlsx file-saver2.在要导出的vue组件中的script引入import FileSaver from "file-saver" import XLSX from "xlsx"3.导出方法exportExcel() {//执行此方法导出Excel表格 // 为el-table添加一个id：out-table // 当el-table使用了fixed时会导出两次数据，所以要先进行判断 var fix = document.querySelector('.el-table__fixed'); var wb; if (fix) { // 如果有fixed，先移除，然后再添加上 wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix)) document.querySelector("#out-table").appendChild(fix) }else{ wb = XLSX.utils.table_to_book(document.querySelector("#out-table")) } var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" }); try { FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), // 导出的文件名称 "Data.xlsx" ) } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); } return wbout; },这个方法也存在问题，比如样式不够灵活等。
