逍湘子

vue3 挂载 axios

MDN 关于模块定义。

elementUI 开发中如何生成动态表单以及批量校验

在上一篇中我们初步使用了vuex，并且在组件中实际使用了vuex。现在，如果我们的项目分了好多模块

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化具体可以学习：Vuex官网初始化一个vue项目// (1) 安装vue-cli npm install -g @vue/cli// (2) 创建vue 项目 vue init webpack vuex-app// (3) npm run dev 启动项目// 如果发现无法使用vuex 并且terminal 出现一下信息，

需求：在弹出的Dialog中，点击新增按钮，生成一个或多个表单，可以取消，保存和关闭(取消，保存，关闭都需要重置表单value)分析：既然是多表单，那么肯定是放到数组中用来保存，然后点击新增按钮，会push一个数组对象进去实现：1.定义表单组件: FormComponent.vue<section class="form-wrapper"> <el-form :model="dynamicForm" label-width="100px" :rules="rules

需求：查询表格数据后，以Excel的形式，导出表格内的所有数据<w-button v-waves class="btn-export" @click="exportLogData" type="primary">导出数据</w-button>import axios from 'axios'import { BASEURL } from '@/http/index'// 日志导出async exportLogData() { const exportParam =

需求：前端需要增加一个导入按钮，导入既定的Excel模板数据，后端接口请求方法：post参数格式：FormDataparam: { name: 'zhangsan'， code: '001', id: 'A001', file: excelData // 后端需要的二进制流}分析：既然是Excel的导入或者导出首先我们就要安装excel的插件xlsx首先全局安装xlsx插件npm install xlsx --save前端代码：我们还是使用element-ui的 el-up

错误分析：TypeError: Cannot read property ‘toFixed’ of undefined，类型错误，toFixed’ of undefined ， 很明显 toFixed 调用了一个不属于它方法的， 也就是说当前变量没有 toFixed 属性，即当前变量数据类型不是Number类型，因为只有Number类型才有 toFixed 方法除此之外在初始化的时候页面显示 NaN 是因为没有初始化，变量没有值，所以是undefined,通过toFixed() 为NaNNaN 属性.

1.安装所需的依赖npm install -S file-saver xlsx (-S => 是–save 的简写 )npm install -D script-loader (-D => 是 --save-dev 的简写)创建Export2Excel和blob文件具体在项目src目录下新建一个Excel的文件夹，并分别下载Blob.js和Export2Excel.js文件这里附上这两个文件的github下载路径：Blob.js_Export2Excel.js3.项目实战先导

问题：vue 项目报错：key值重复分析：v-for 循环中绑定的key值有重复的值，导致vue v-for 指令无法正确识别不同的Dom 对象解决：1.让后端修改返回的数据(后端返回的数据有问题)，每项必须都有一个唯一的code标识，一般下拉框中传给后端的是code，显示的label是名字name2.v-for 循环时，拼接一个index：key=’item.nam_${index}’<div v-for="(item, index) in list" :key="`item.cod.

从三个方面着手：DOM结构，数据传递，事件触发1.DOM结构：<button></button>2.数据属性1)props获取父组件传递过来的数据2)引用computed计算出相关的数据变化3.事件： 父子组件通信，子组件向父组件发消息可以用emit实现，父组件监听emit实现，父组件监听emit实现，父组件监听on即可1）样式绑定:class="[ type ? 'el-button--' + type : '', buttonSize ? 'el-b

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. from MDN…翻译过来：回调函数是一个函数当作参数被传递的另一函数的函数，在外部函数内部调用来完成一些动作或者线程特点：1.作为参数被传递 2. 在函数内部调用

这个报错是在vscode编辑中出现一个红色波浪线，鼠标放上去提示：Parsing error: await is a reserved word， 解析错误：await是一个保留字，说明编辑器没有识别这个，当成一个关键字了await async 是必须成对出现的，因为我是在表单校验外部给函数名称加了一个async关键字，想在内部用同步函数，但是报错。// 保存async save() { this.$refs.form.validateForm((valid) => { if (v

问题：实际业务中有一个多Tab的多表格数据UI界面，即：在每一个Tab下去渲染多个Table的数据，而且这些表格是离散的，即：@selection-change事件只能获取当前表格的选中项，而我们的业务是要求获取多个离散的选中项之前已经有一篇 ‘JS多表格离散选中项处理’的博客，而此篇是解决多Tab下的多表格选中项处理，与上一篇大同小异，只是多了Tab的Dom遍历处理<div class="table-area" v-for="(cartItem, cardId) in cartList" :ke

问题：在表格外部再添加一个checkbox来关联表格内部的复选框，即：外部的checkbox和表格的checkbox动作，行为是一致的<!--外部checkbox--><div class="module-title"> <el-checkbox v-model="cart" label="购物" @change="handleChecked('cart')"></el-checkbox></div><!--表格-->&lt

问题：（需求）有多个购物者的购物明细需要以表格的形式来呈现出来，此时，渲染出来的是多个表格，即遍历<div class="table-area" v-for="(cartItem, cardId) in cartDetails" :key="cardId"> <el-table :data="cartItem.itemDetails" style="width: 100%" @selection-change="handleSelectionChange" :ref="`

复选框一般可以选择多个item,选中的项放到一个数组中，每个item之间不是互斥的效果而单选框一般是在同一个组中，组中的每个项彼此之间是互斥的，即：选择A,B就不能选，选择B,A就不能选那么，怎么实现复选框和单选一样的效果呢？<el-form ref="form" :model="form" label-width="80px"> <el-form-item> <el-checkbox v-model="form.a" true-label="1" @change="

typeof 检测数据类型typeof 操作符返回一个字符串，表示未经计算的操作数的类型基本数据类型检查// Numbertypeof 123 // "number"typeof 12.11 // "number"typeof(21) // "number"typeof Infinity // 'number';typeof NaN // 'number'; typeof Number(1) // "number"// BigInttypeof 42n === 'bigint';

箭头函数是es6的一个新特性，采用（箭头） => 来表示，使函数的声明更加简洁，容易。es6之前我们声明函数是这样的：let fn = function(a, b) { return a + b;}// 使用箭头函数let fn1 = (a, b) => a + b;// 调用let r1 = fn(1, 2);let r2 = fn1(1, 2);console.log(r1, r2); // 3 3let fn = function getName() { cons

1.布尔值 Boolean最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）let isDone: boolean = true2.数字 NumberTypeScript里的所有数字都是浮点数。 这些浮点数的类型是 numberlet age: number = 203.字符串 String使用 string表示文本数据类型。 和JavaScript一样，可以使用双引号（ "）或单引号（’）表示字符串le

https://juejin.im/post/6844903838449664013https://juejin.im/post/6844903926110617613

https://segmentfault.com/a/1190000018428170

const fruitsArr = ['apple', 'peach', 'banana', 'cherry']// Array.some() 用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false// Array.every() 用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false// Array.includes()// (1) 对多个条件使用 Array.includes()if (item === 'apple' || item ===

这一一篇很全面，且有内容的js笔记整理，有助于前端开发很好的检查和提升自己的js知识。https://segmentfault.com/a/1190000022014120?utm_source=sf-related

https://juejin.im/post/6844904032385892359感觉这篇写的不错，大家可以参考阅读。

子组件调用父组件方法(1) 在子组件中直接调用父组件方法：this.$parent.parentMethod();(2) 在子组件中通过emit触发定义在父组件中的方法：this.$eimt(‘parentMethod’, params)(3) 父组件传方法给子组件，子组件直接调用// 父组件中绑定一个方法<template> <div> <child :parentMethod="parentMethod"></child> &lt

现在，Moment.js 停止开发了，这也将意味着新的bug将不再被修复，新的功能将不再被开发出来，那我们接下来该用什么呢？如果有人还在使用momentjs,可以继续查看官网，http://momentjs.cn/docs/官方推荐语：Day.js 被设计为 Moment.js 的极简替代品，拥有几乎一样的 API。如果你习惯使用 Moment 的 API 并希望快速入门，请考虑使用 Day.js。Day.js 是一个轻量的 JavaScript 时间日期处理库，和 Moment.js 的 API

问题：经常会有这样的场景，我们需要将多个对象放进数组，而我们一般的做法是，先创建一个新数组，然后遍历目标数组，取出数组中的每一项然后push 到这个新数组，const dataList = [ { "id":1, "name":"zhangsan", "age": 30 }, { "id":2, "name":"lisi", "age": 25 }, { "id":3, "name": "wangwu", "age": 22 } ]; const newArr = []; functio

问题：对于复杂的参数结构，我们一般要怎么处理呢？比如：{ "orgId": 0, "outpClinicAreaId": 0, "roomList": [ { "deskList": [ { "locationId": 0, "memo": "string", "outpClinicDeskId": 0, "outpClinicDeskName": "string",

问题：在调用接口返回数据时，table中的数据行根据后端返回的某些字段，默认勾选解决：elementUI 中：toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection();

做项目时遇到一个问题：在Dialog中写入副标题，可是 dialog的title是一个字符串啊，怎么在字符串中嵌入html标签并且加入样式呢？问题：如下图通常我们的写法是这样的：<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center></el-dialog>所以这种情况，我们没法去写副标题，还要加一些样式来区别主标题和副标题，即图中的 2 部分，那怎么办呢

1.首先我们自己新建一个 validatorUtils.js 文件来存放我们项目中所有的校验器内容可以是：/** * 校验使用: message: 自定义信息，extra: 对象, 额外传递的参数 *//** * 是否必须 * @param {*} rule * @param {*} value * @param {*} callback */export function validateRequire(rule, value, callback) { if (!value &a

问题：最近开发一个新项目，用vscode 一打开就一堆的eslint代码报错,控制台也报错好多。打开代码也是一堆的报红，去网上查了下，然后按照网上博客的步骤区配置，结果：The setting is deprecated. Use editor.codeActionsOnSave instead with a source.fixAll.eslint member.意思是此配置已经作废，bla...解决方案:于是，试着按照下面描述的做了修改，"editor.codeAct

https://www.cnblogs.com/mrwh/p/12327883.htmlhttps://zhuanlan.zhihu.com/p/105136924?utm_source=cn.wiz.notehttps://www.cnblogs.com/ChengWuyi/p/8127490.html

vue引用了第三方组件，有时候我们需要改写第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。有些Sass 之类的预处理器无法正确解析 >>> 这时可以使用 /deep/ 操作符( >>> 的别名)<style lang="scss" scoped> 自定义class(外层) >>> 第三方组件class { 具体的样式内容 }自定义class

https://www.jianshu.com/p/a6f741c7b500https://www.jianshu.com/p/1c100da828f3https://blog.youkuaiyun.com/u014678583/article/details/107387891/https://blog.youkuaiyun.com/Dg_Zing/article/details/87902895推荐以上博客，大家学习一下吧。

https://segmentfault.com/a/1190000022772025?utm_source=sf-related

// 接口根路径let baseURL = 'http://192.168.0.0:4000/fzpt-api'// 请求拦截器axios.interceptors.request.use(config => { // 在发送请求之前做些什么 if (Store.state.token) { config.headers['Authorization'] = Store.state.token } return config}, error => { // 对

// http.js统一封装接口/* * @Author * @Date */import axios from 'axios'import { Message } from 'element-ui'const token ='你自己的token'// create an axios instanceconst http = axios.create({ baseURL: '/api', timeout: 80000 // request timeout}) // reque