Vue 碎知识

weixin_53607765

已于 2022-06-21 17:23:35 修改

阅读量1.7k

点赞数

分类专栏： Vue 杂其它文章标签： vue.js 前端 javascript

于 2022-06-21 14:56:19 首次发布

本文链接：https://blog.csdn.net/weixin_53607765/article/details/125391223

版权

Vue 同时被 3 个专栏收录

6 篇文章

订阅专栏

其它

4 篇文章

订阅专栏

杂

1 篇文章

订阅专栏

本文介绍了Vue中全屏对话框的实现、表格的动态绑定与操作，以及ECharts图表的事件处理与高度调整。涉及内容包括Vue的$nextTick、组件传参、表单提交阻止、DOM操作、父子组件通信、ECharts图例控制、滚动条设置及图表渲染优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，Vue

<a v-on:click.stop="doThis"></a>


<form v-on:submit.prevent="onSubmit"></form>


<a v-on:click.stop.prevent="doThat"></a>


<form v-on:submit.prevent></form>



<div v-on:click.capture="doThis">...</div>



<div v-on:click.self="doThat">...</div>


<a v-on:click.once="doThis"></a>

1，$nextTick

$nextTick的用法_风如也的博客-CSDN博客_$nexttick的使用

实现全屏效果，把内容展示在全屏状态对话框里面

，<el-dialog
title=""
:visible.sync="dialogVisiblefull"
:fullscreen="true"
:before-close="()=>{dialogVisiblefull = false}">
<div id="Robotoptionfull" style="height: 600px;width: 96%;margin-left: 2%">
</div>
</el-dialog>，

当点击全屏，先触发对话框，onclick: function () {
//方法1 对话框
self.dialogVisiblefull = true
self.$nextTick(function () {
self.arrange('Robotoptionfull')
})
}

vue的slot主要分三种，

默认插槽<slot></slot>，

具名插槽<slot name="名称"></slot>，

作用域插槽<slot :自定义name=data中的属性或对象></slot>；

使用插槽是在存在父子关系的组件中使用

使用 Vue 组件来简化页面逻辑：

首先我们需要通过import的方式导入子组件。
然后在components中注册子组件。
最后将子组件挂载到模板中，并将需要子组件展示的数据传给子组件。

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。

his.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。
注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

vue项目中子组件watch不到父组件传递的props变化

当给columnField的alias和description属性直接赋值时，这两个属性并不是响应式的，所以子组件中watch不到columnField的变化。

定义columnField的同时定义属性使用vue.set添加属性，保证属性是响应式的 Vue.set(this.columnField,'alias',element.alias);
Vue.set(this.columnField,'description',element.description);

vue从入门到进阶:组件Component详解(六)

https://www.cnblogs.com/moqiutao/p/8328931.html

（重要）如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。

将 store 当做参数传给 Vue 进行初始化之后，

Vue 就会将 Store 里的 state (state 参数用来存放全局的状态,)注入到所有的 Vue 组件中，这样所有的 Vue 组件共享同一个全局的 state

el-row

<el-row :gutter="10">
<el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

<el-row type="flex" class="row-bg" justify="center"> 设置盒子属性盒子居中
justify="end"
justify="space-between"
justify="space-around"

<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">

使用 Vuex

Getters 复用本地数据获取逻辑,可以通过两种方式访问 getter，

一个是通过属性访问this.$store.getter.allProducts，

另一个是通过方法访问：this.$store.getter.productById(id)
可以接受两个参数：state和getters，state就表示本地数据源；我们可以通过第二个参数getters获取到不同的getter属性。

Action 获取远程数据，并将获取的数据提交到对应的 Mutation 中：
Mutation 修改本地状态
this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state

this.$store.dispatch() ：含有异步操作，例如向后台提交数据，

写法：this.$store.dispatch(‘action方法名’,值)
this.$store.commit()：同步操作

写法：this.$store.commit(‘mutations方法名’,值)

commit: 同步操作

存储 this.$store.commit('changeValue',name)
取值 this.$store.state.changeValue

dispatch: 异步操作

存储 this.$store.dispatch('getlists',name)
取值 this.$store.getters.getlists

vue element ui 实现动态表格/表单(新增/删除行)

<el-form ref="paramsSettingForm" :model="paramsSettingForm" size="small">
<el-table
:data="paramsSettingForm.tableData"
style="width: 100%"
class="list-table"
size="mini"
addList () {
this.paramsSettingForm.tableData.push({
beginTime: '',
endTime: ''
}),

对子组件属性prop进行“双向绑定”

this.$emit('update:father-num',100);

elementUI，在禁用的表单下，取消其中一个input输入框的禁用，

---嵌入一个子form 
<el-form label-width="100px" size="mini" :model="form">
<el-form-item label="不禁用:">
<el-button @click="doSomething()" size="mini">不禁用 </el-button>
</el-form-item>
</el-form>

在select的change事件中调用此方法，运用 this.$forceUpdate()强制刷新，页面正常选值

自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串。

vue+ element 中如果想要获取当前点击元素的index scope.$index

el-table type="expand" 子项无数据时不显示展开按钮

父级父级表格设置属性 :row-class-name="getRowClass"表格设置属性 :row-class-name="getRowClass" // 判断表格是否有子项，无子项不显示展开按钮

tab页切换

<el-tab-pane>
<span slot="label">
<i class="el-icon-message">人员信息</i>
<el-badge :value="todo" v-if="todo>0" size="mini" class="item"></el-badge>
</span>
</el-tab-pane>

tab页，但是vue会帮你把你写的所有tab页的内容都渲染出来了如果每个tab页的数据都过大的时候，可能就会导致首次打开页面卡顿现象当v-if的值为false时vue是不会去渲染该标签下的内容的就把tabs下的子模块

标签上加v-if，一开始只设置其中一个为true其他都为false，当点击tab切换时去改变v-if的值，代码如下↓<el-tab-pane label="待处理" name="first" :key="'first'">
<processed v-if="isFirst"/>

el-table 文字居中:

header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"

使用type='selection'实现多选需要禁用某一行

type="selection" :selectable='checkboxSelect'

checkboxSelect (row, rowIndex) {
if (rowIndex == 0) {
return false // 禁用
}else{
return true // 不禁用
}
}

实现全屏效果，把内容展示在全屏状态对话框里面，

<el-dialog
title=""
:visible.sync="dialogVisiblefull"
:fullscreen="true"
:before-close="()=>{dialogVisiblefull = false}">
<div id="Robotoptionfull" style="height: 600px;width: 96%;margin-left: 2%">
</div>
</el-dialog>，

当点击全屏，先触发对话框，
onclick: function () {
//方法1 对话框
self.dialogVisiblefull = true
self.$nextTick(function () {
self.arrange('Robotoptionfull')
})
}

为了能够防止内容超出弹框，并且一直看到footer里的按钮，

需要固定对话框的高度在对话框内容元素的外面加一个 div，然后设置 div 的高度，并且设置 overflow: auto，这样，内容超出时会出现滚动条，可以进行滑动，

使用vue的插槽，

建一个template的插槽。名字用description

element的表格中scope中
$index中存着当前行，在表格的列表中的索引值column本列的数据row本行的数据

通过slot name的属性，将template slot="name名" 一一对应起来

新版本语法 v-slot
<template v-slot:tit>老虎</template>

在旧版本中slot="xxx"的情况下，可以挂载在非 template标签上，

如：<p slot="tit">老虎</p>

但是在v-slot:tit的情况下，必须使用template标签<template v-slot:tit>老虎</template>

props

是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的 props 来重新渲染子组件，否则子组件的 props 以及展现形式不会改变。

// props: {
// dataTime: {
// type: Array,
// },
// typeChange:{
// type: Function
// }
// },

state

主要作用是用于组件保存、控制以及修改自己的状态，它只能在 constructor 中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState 来修改，修改 state 属性会导致组件的重新渲染

Refs

是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

upload组件

因为element的upload组件对这个name设置的默认值是name = "file",如果这个时候后台的接收文件的接口的这个文件的字段名也设置的是file的话就不用设置这个name也可以成功上传文件，如果后台把这个文件的字段名改了那就必须设置成和后台一样的才行
:on-change="encFileEdit" encFileEdit(file,fileList){
if(fileList.length>1){ //这里只获取最后一次选择的文件
fileList.splice(0,1);
}
if(fileList.length>0){ //如果有文件的情况下获取文件流
this.applyInfo.enc_cert_name = fileList[0].raw;
}
},

设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可:class="item.id==1?'forbid':''

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
在对话框表格中，绑定的data绑定了其它表格，在第一次对话框打卡时，总是显示暂无数据，

多次调用的组件这样引入，可以让name不和父组件冲突

components: {
Demo: () => import('...')
}

解决el-table排序时当某列数据有空值导致排序错乱的问题:

key="tableKey" ++this.tableKey

给el-table筛选条件设置默认筛选条件（设置默认过滤值）

this.$refs.filterTable.columns[3].filteredValue = ['家'];

stripe 设置了斑马文table效果在设置 row-class-name 会斑马文显示

let obj = {};

let peon = person.reduce((cur,next) => {
obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
return cur;
},[])

路由传参-和name配对的是params，和path配对的是query。
<router-link :to="{name:'Test',params: {index: 1}}">

是在html中实现的跳转
this.$router.push({path: '/t?index=1'})在js中实现的跳转并传参的方法

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

为el-select添加filterable属性即可启用搜索功能。

默认情况下，Select 会找出所有label属性包含输入值的选项。

当 elementUi 选中一个值，其余选项全部高亮解决

1value绑定的是 item 的对象;
2.首先在 el-option 中添加 :key="item.id"的属性;
3.然后在 el-select 添加 value-key="id" 属性，注意 value-key 前面没有:
4.注意 value-key 的值与 key 绑定的属性值对应。

elementUI select有值却无法选中

在select绑定的change函数中使用this.$forceUpdate();

//路由跳转指定页面
this. $router.push({ path: "/”});
v-for 指令可以绑定数组的数据来渲染一个项目列表：

“:” 是指令属性绑定 : “v-bind”的缩写，

v-bind 用于动态绑定属性值该指令的意思是：“将这个元素节点的特性和 Vue 实例的属性保持一致”。

“.”是修饰符，修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

“@”是指令“v-on”的缩写；

@click @submit 事件绑定 @

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。stringObject.match(regexp)，regexp必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。使用

@submit.prevent .prevent 表示提交以后不刷新页面

prevent是preventDefault,阻止标签默认行为，有些标签有默认行为，例如a标签的跳转链接属性href等。
submit点击默认行为是提交表单，这里并不需要它提交,只需要执行addMemo方法，故阻止为好。

一个组件的 data 选项必须是一个函数 data: function () {}

全局注册的组件可以用在其组件树中的所有子组件的模板中。

vue父子组件传参的4种方式

https://blog.csdn.net/glorydx/article/details/112247747

父组件传参给子组件
方法1 父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。
直接传值

<blog-post title="My journey with Vue"></blog-post> 在子组件中加 props: ['title'], 接收
间接传值

<blog-post v-for="post in posts" v-bind:key="post.id" :post="post"></blog-post>

posts是new Vue 里面data 数组 { id: 1, title: 'My journey with Vue' },

方法2 父组件主动获取所有的参数和方法（子组件被动传参）
methods: {
onClickChangePhone() {
// 父组件调用子组件中的showPhone方法
this.$refs.phoneRef.showPhone();
}
}
v-if="visible"
showPhone() {
this.visible = true
},

方式一子组件（主动）向父组件传参

子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用。

样式 :style="{ fontSize: postFontSize + 'em' }"

方法2 子组件传参给父组件子组件向父组件传参 $emit
子组件：v-on:click="$emit('enlarge-text', 0.1)" 通过 $event 访问到被抛出的0.1这个值：
父组件：v-on:enlarge-text="postFontSize += $event"

动态组件 is

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。
动态组件使用 is attribute 来切换不同的组件：

使用webpack 的模块系统。

创一个 components 目录，将每个组件放置在各自的文件中,

然后局部注册之前导入使用的组件。

import ComponentA from './ComponentA'

对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值,父组件如果传入 type="text" 就会替换掉子组件的 type="date"
class 和 style attribute 会智能一些，即两边的值会被合并起来，从而得到最终的值：

v-on 事件监听器在 DOM 模板中会被自动转换为全小写

当组件渲染的时候，子组件里的<slot></slot> 将会被替换为“Your Profile”。

插槽内可以包含任何模板代码，包括 HTML：甚至其它的组件
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

<template v-slot:header> v-slot 只能添加在 <template> 上

当被提供的内容只有默认插槽时，组件的标签可以被当作插槽的模板template来使用，可以把 v-slot 直接用在组件上：

<current-user v-slot:default="slotProps">
v-slot 的缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。

例如 v-slot:header 可以被重写为 #header：

动态组件 & 异步组件
在动态组件上使用 keep-alive 元素将其动态组件包裹起来。

<keep-alive> 标签的组件实例能在它们第一次被创建的时候缓存下来

v-on: 事件绑定给元素进行事件绑定,

// 按钮权限 disabled 属性规定应该禁用 input 元素。

// 数据载入loading

listLoading: true,记录使用Element-UI的v-loading指令。Element提供了两种调用Loading的方法:指令和服务。指令对于自定义指令v-loading,只需要绑定Boolean即可

slot-scope作用域插槽做什么:

解决父组件模板的所有东西都会在父级作用域内编译; 子组件模板的所有东西都会在子级作用域内编译---父组件的模板是无法使用到子组件模板中.

Table表格

带边框表格当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽

Label(标签)组件

用于在屏幕上显示文本或图像。Label 组件仅能显示单一字体的文本,但文本可以跨越多行。另外,还可以为其中的个别字符加上下划线(例如用于表示键盘快捷键)。

element ui el tag实现根据状态显示不同颜色标签这里用了三元表达式通过获取当前行内状态值动态改变tag颜色最终实现效果
<el-tag :type="props.scope.row.delFlg=='0' ?'success':'info'">{{props.scope.row.stats}}</el-tag>

default-expand-all属性设置默认展开的节点
expand-on-click-node属性为true的话,点击按钮会同步触发节点的展开收缩事件
使用render-content指定渲染函数，该函数返回需要的节点区内容即可
使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据

elementUI树状图竖向滚动条:

style="height: 500px;overflow:scroll;"

设置el-table 表格内容左对齐

cell-style="{'text-align':'left'}"

element ui 树形表格过滤查询数据解决，

let handleTreeData = this.handleTreeData(treeData, searchValue) this.setExpandRow(handleTreeData)

当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件

为什么在组件内部调用 useEffect？

将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。

ElementUI 的 Cascader 级联选择器对 :options="options" 里的数据格式是有特定要求的

：input 框显示的值是 options 里的 label 值。如果 options 的键值对不是 value label ，就需要 props 来配置。:props="{ value: 'id', label: 'name'}"

//获取禁用的日期

<el-date-picker
type="dates"
format="d"
:picker-options="pickerOptions"
v-model="tablelist.actives"
placeholder="选择一个或多个日期"

>
</el-date-picker>
pickerOptions: {
disabledDate: (time) => {
var time=new Date(time);
// var year=new Date().getFullYear();
// let minDate =new Date(year,0,1).getTime();
// let maxDate =new Date(year,11,31 ).getTime();
// return time.getTime() < minDate||time.getTime() > maxDate;
// time.getTime() < minDate||time.getTime() > maxDate||
return this.dateDisabled.indexOf(time.getTime())!=-1;//如果日期在禁用数组里则禁止选择

}},

mounted() {
this.getdateDisabled();
},
getdateDisabled(){
var year=[];
var yearss=new Date().getFullYear();
for(var years = yearss; years <yearss+5; years++){
//获取年
year.push(years);
}

在方法名后面加上.call会立马去执行，但是加.bind则不会自动执行

onClick={ handleClick.call({ }, '传参')
类组件用 this.state 读，this.setState 写
类组件的 setState 会自动合并旧的数据v函数组件的 setState 不会自动合并旧的数据

Vue.config.productionTip = false 是阻止显示生产模式的消息。

:selected 隐藏被选择的下拉列表选项：

2 js es6

preventDefault() 方法取消事件的默认动作。

FileReader

FileReader.readAsDataURL(File) //转换成base64格式

FileReader.readAsText() //转换成字符串格式

FileReader.readAsArrayBuffer(File) //转换成ArrayBuffer格式

FileReader.readAsBinaryString(File) //转换成原始二进制格式（貌似已被废除）

FileReader.onload = function (e) { console.log(e.target.result) } //在上述读取事件完

var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
reader.onload = function (e) {
// 转换完成，创建一个a标签用于下载
var a = document.createElement("a");
a.download = name + ".xls";
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
resolve(200)
$(a).remove();

文件上传

如果只是简单的文件上传，则可以直接使用原生<input type = "file">以及各UI库的upload组件配合后端给的文件上传接口处理即可
如果有前端限制上传文件大小的需求，则可以根据change回调中的size属性试情况处理

FileReader类

则常用于读取本地文件内容，如读取txt或者CSV等格式文件的内容，不过需要注意编码以及字符串切割

vue elementui steps组件在步骤条中添加自定义样式内容，

，

Object.assign 复制一个对象

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 } 深拷贝问题
合并对象

多层数据的合并

方法一------使用 ... 运算符.,多层数据的合并

方法二------使用 Object.assign 函数组件：

替换数组对象的键名。

通过 map 实现:const newData = results.map((item)=>{ return { name: item['名称'], status: item['状态'] } })

在指定位置添加元素,第一个参数指定位置,第二个参数指定要删除的元素,如果为0,则追加

var array = ["one", "two", "four"];
console.log(array);
array.splice(2, 0, "three");

scope.row.direction === 1 ? "上行" : (scope.row.direction === 2 ? "下行" : "未知"

1.将json对象转化为json字符串，再判断该字符串是否为"{}"

var data = {};

var b = (JSON.stringify(data) == "{}");

alert(b);//true

js获取当前年月日

var d = new Date();

var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
alert(str);去掉指定字符串，如工单处理录入问题库，发生事件去掉字母T,当日期<10 去掉0，调日历报表那，监听value，月，当前选择日期，根据值的变化页面，数据做出更改，修改series对应数组里面的barWidth属性即可设置柱形图宽度，当然还有最小宽，最大宽则是barMinWidth和barMaxWidth

初始化d为三月份的第0天，由于JavaScript中day的范围为1~31中的值，所以当设为0时，会向前一天，也即表示上个月的最后一天。
通过这种方式可以得到每个月份的天数，也不同区分闰年了，很方便~
可以写个这样的函数，如下：
function mGetDate(year, month){
var d = new Date(year, month, 0);
return d.getDate();
}
在使用时传入想要获取的年份和月份即可，如下：
var totalDay = mGetDate(2004,2);

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。（0).toFixed ==0.0

js实现圆形显示鼠标单击位置

数组对象排序

每个元素并非是数组，而是对象值比较排序，必须传入sort参数（函数）进行规制制定functon sortRule(a,b) { return a.age - b.age; }只能对age进行排序，我们再优化一下：

//这样就能通过传不同的参数而有选择性的排序了
function sortBy(field) {
return function(a,b) {
return a[field] - b[field];
}
}
arr1.sort(sortBy("score"));
arr1.sort(sortBy("age"));
————做一个设想：假如score相等的情况下，我们是否可以按照年龄的大小排序输出？

function sortBy(field1,field2) {
return function(a,b) {
if(a.field1 == b.field1) return a.field2 - b.field2;
return a.field1 - b.field1;
}
}

arr1.sort(sortBy("score","age"));
——————var sdts = [ {name:"小明",age:12,score:100}, {name:"小红",age:13,score:80}, {name:"小花",age:11,score:90} ]

formatter:function (params) {

if(params.value==0){

//为0时不显示 return ''

}

else{

return params.value

} }

//设置cur默认类型为数组，并且初始值为空的数组
console.log(peon);

ES6 数组内对象去重

替换数组对象的键名。通过 map 实现:

const newData = results.map((item)=>{

return { name: item['名称'], status: item['状态'] }

})

根据所选择的开始日期与结束日期，然后根据这个日期范围来列出之间每天的日期年月日转换成标准时间

new Date(a) 获取本周起始日期
选中状态点击取消按钮时回复到默认的选择时间

var bd = new Date(start_time),

be = new Date(end_time);
var bd_time = bd.getTime(),

be_time = be.getTime(),

time_diff = be_time - bd_time;
var d_arr = [];
for(var i=0; i<= time_diff; i+=86400000){
var ds = new Date(bd_time+i);
d_arr.push((ds.getMonth()+1)+'月'+ds.getDate()+'日')
}
alert(d_arr);

获取当前日期或几天后/前的日期，并转换成 2017-07-09 格式　　

　　今天：getDateStr(0)
　　　　昨天：getDateStr(-1)
　　　　明天：getDateStr(1)
12345678

getDateStr (AddDayCount) {

var dd = new Date();

dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期

var year = dd.getFullYear();

var mon = dd.getMonth()+1;

//获取当前月份的日期

var day = dd.getDate();

return year + '-' + ( mon < 10 ? ( '0' + mon ) : mon ) + '-' + ( day < 10 ? ( '0' + day ) : day) ;}
//标准时间变为年月日格式的使用 var d1=new Date() var d2=formatDate(d1) console.log(d2) //2019-02-13

//将中国标准时间转换为年月日格式

----开始

function formatTen(num) {

return num > 9 ? (num + "") : ("0" + num);

}

function formatDate(date) {

var year = date.getFullYear();

var month = date.getMonth() + 1;

var day = date.getDate();

var hour = date.getHours();

var minute = date.getMinutes();

var second = date.getSeconds();

return year + "-" + formatTen(month) + "-" + formatTen(day);

}

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

js里数组或对象的键名修改

var  key =  'abc' ;
var  obj = {key :  '值' };
// 复制原来的值
obj[key] = obj[ 'key' ];
// 删除原来的键
delete  obj[ 'key' ];
// 检查效果
alert(obj.abc);

includes()：

返回布尔值，表示是否找到了参数字符串。includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部
s.startsWith('Hello') // true

JavaScript 对大小写敏感在 JavaScript 中，

等号（=）是赋值运算符，而不是“等于”运算符。

“等于”运算符是 ==。如果把数值放在引号中，会被视作文本字符串。

以 var 作为语句的开头，并以逗号分隔变量：声明可横跨多行：如果把要给数值放入引号中，其余数值会被视作字符串并被级联。

相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：

&& and逻辑与 ||逻辑或or

系数运算符（%）返回除法的余数。

取幂运算符（**）将第一个操作数提升到第二个操作数的幂。

JavaScript 对象用花括号来书写。

对象属性是 name:value 对，由逗号分隔。

typeof 运算符对数组返回 "object"，因为在 JavaScript 中数组属于对象。

toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

箭头函数在参数和箭头之间不能换行。可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、'{ }'来实现换行

实例x ** y 产生的结果与 Math.pow(x,y) 相同:

save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 来恢复以前的值。

find() 方法获得当前元素集合中每个元素的后代，通过选择器、find()出来的是一个数组对象

findOne()出来的是查到的第一个对象 jQuery 对象或元素来筛选。

exec() 方法用于检索字符串中的正则表达式的匹配。

Javascript 中可以使用反斜线（\）插入特殊符号 \"Vikings\" 双引号 \'单引号 \n 换行 \r 回车 \t tab \b 空格 \f 换页

提取字符串字符的方法：charAt(position) 返回字符串中指定下标（位置）的字符串

这三种 JavaScript 方法可用于将变量转换为数字：

Number() 方法返回数字，由其参数转换而来。 Number(new Date("2019-04-15"));

// 返回 1506729600000 返回 1970 年 1 月 1 日至今的毫秒数。
parseInt() 方法解析其参数并返回整数。允许空格。只返回首个数字：
parseFloat() 方法解析其参数并返回浮点数。

js,es6,方法

toString() 以字符串返回数值。

valueOf() 以数值返回数值：

toFixed() 返回字符串值，它包含了指定位数小数的数字：

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

toPrecision() 返回字符串值，它包含了指定长度的数字：

charCodeAt(position) 返回字符串中指定索引的字符 unicode 编码：

concat() 连接两个或多个字符串：用于连接两个或多个数组。arr.concat(arr2,arr3)

sort() 方法用于对数组的元素进行排序。points.sort(function(a,b){return a-b});

trim() 方法删除字符串两端的空白符：

replace() 方法用另一个值替换在字符串中指定的值：只替换首个匹配：对大小写敏感如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：请注意正则表达式不带引号。
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：

search() 方法搜索特定值的字符串，并返回匹配的位置：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
shuffle() 方法将序列的所有元素随机排序。import random random.shuffle (lst )
Math.floor() 返回小于或等于一个给定数字的最大整数。可以理解 Math.floor()为向下取整
random() 方法可返回介于 0 ~ 1 之间的一个随机数。
// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
webpack 配置中将会 "@" 映射成 resolve('src')，是项目目录下 src 文件夹的路径， '@/components/HelloWorld' 相当于 src 文件夹里面的 components/HelloWorld 组件。
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

pop() 方法用于删除并返回数组的最后一个元素。
join() 方法用于把数组中的所有元素放入一个字符串。arr.join(".")
unshift() 添加和 shift() 删除它们作用于数组的开始，
push() 数组末尾添加一个项目，
pop() 方法用于删除并返回数组的最后一个元素。
将数组转换为字符串的另一种方法是使用 toString() 方法。 toString() 可以比 join() 更简单，因为它不需要一个参数，但更有限制
split() 方法用于把一个字符串分割成字符串数组。"2:3:4:5".split(":") //将返回["2", "3", "4", "5"] var words = sentence.split(/\s+/)
appendChild() 方法向节点添加最后一个子节点。添加新元素到尾部。node.appendChild(node)
insertBefore()将新元素添加到开始位置
removeChild() 方法指定元素的某个指定的子节点。以 Node 对象返回被删除的节点，如果节点不存在则返回 null。
replaceChild() 方法来替换 HTML DOM 中的元素。
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

toLowerCase() 方法用于把字符串转换为小写。

有三种提取部分字符串的方法：

slice(start, end) arrayObject.slice(start,end) 包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
substring(start, end) 无法接受负的索引。
substr(start, length) 第二个参数规定被提取部分的长度。

...展开运算符,将一个数组转为用逗号分隔的参数序列,合并数组,替代apply,解构赋值,字符串转为数组,正确识别 32 位的 Unicode 字符,具有 Iterator 接口的对象,转换成数组,浅拷贝

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

arrayObject.splice(index,howmany,item1,.....,itemX)
index 整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

不会改变原始数组按照原始数组元素顺序依次处理元素。

\ 转义字符。

Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。

它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。如果只有一个参数，Object.assign会直接返回该参数。this.robotInfo=Object.assign(JSON.parse(JSON.stringify(this.getData)),item)

python中 print 默认输出是换行的,在变量末尾加上 end=""实现不换行 print(i,end='')

for...of 是 ES6 新引入的循环，用于替代 for..in 和 forEach()

https://www.runoob.com/vue3/vue3-ajax-axios.html

Promise 类有 .then() .catch() 和 .finally() 三个方法，

这三个方法的参数都是一个函数，

.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，

.catch() 则是设定 Promise 的异常处理序列，

.finally() 是在 Promise 执行的最后一定会执行的序列。

.then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列：

JSON 数据格式为键/值对，JSON.parse()，JSON.stringify()

就像 JavaScript 对象属性。键/值对包括字段名称（在双引号中），后面一个冒号，然后是值："name":"Runoob"
JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。

padStart：返回新的字符串，用参数字符串从头部（左侧）补全原字符串。

如果指定的长度小于或者等于原字符串的长度，则返回原字符串:'x'.padStart(5, 'ab') // 'ababx'

padEnd：返回新的字符串，用参数字符串从尾部（右侧）补全原字符串。

如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的补全字符串: 'x'.padEnd(5, 'ab'）// 'xabab'

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

eval(string）

var x=10 eval(x+17) //27

eval("x=10;y=20;document.write(x*y)") //200

数值和字符串相加

JavaScript 将把数值视作字符串JavaScript 从左向右计算表达式。

不同的次序会产生不同的结果：
字符串是文本，由双引号或单引号包围：

分号分隔 JavaScript 语句，如果有分号分隔，允许在同一行写多条语句：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

可以在 JavaScript 中创建三种消息框：警告框（alert)、确认框(confirm)、提示框(prompt)。

设置节点文本内容:node.textContent=text

返回节点文本内容:node.textContent

本地 localStorage

存
var arrLi = [{“search_content”:“火锅”},{“search_content”:“火锅2”}];//定义
localStorage.setItem(“searchLI”,JSON.stringify(arrLi));

获取
var arrLi1 = JSON.parse(localStorage.getItem(“searchLI”));

累加：
arrLi1.push({“search_content”:“火锅”});

修改：
localStorage.setItem(“searchLI”,JSON.stringify(arrLi1));

全部清除
this.xxx = [];
localStorage.removeItem(‘searchLI’);

3 Echarts

Echarts使用一个图例legend实现全选和全部取消的功能

1、修改legend的data值，在前面加上全选和全不选，data = ['全选'，'全不选'，1,2,3]
2、监听 legendselectchanged事件

markLine: {
silent: true,
lineStyle: {
normal: {
color: '#01fef9' // 这儿设置安全基线颜色
}
},
data: [{
yAxis: linevalue
}],
label: {
normal: {
formatter: '安全\n基线' // 这儿设置安全基线
}
},
},

lineStyle 下normal 可设置线颜色

关系图legend对应 categories数据，这可以实现单向箭头edgeSymbolSize: [1, 5],
edgeSymbol: ['circle', 'arrow'], 设置连接线字体样式，force下repulsion: 1700设置线长度

echarts折线图设置横向基准线/水平线

smooth:true,//平滑曲线

js获取当前年月日

var d = new Date();
var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
alert(str);

去掉指定字符串，如工单处理录入问题库，发生事件去掉字母T,当日期<10 去掉0，调日历报表那，监听value，月，当前选择日期，根据值的变化页面，数据做出更改，修改series对应数组里面的barWidth属性即可设置柱形图宽度，当然还有最小宽，最大宽则是barMinWidth和barMaxWidth

在对话框表格中，绑定的data绑定了其它表格，在第一次对话框打卡时，总是显示暂无数据，

echarts点击一次,绑定事件执行多次解决方法
在前方通过off解绑

myCharts.off('click');
myCharts.on(‘click',function(params){})

动态改变echarts图表高度并重新渲染

export default {
// dom挂载再调用，因为created钩子里面dom还没挂载
mounted() {
this.lineChart()
},
methods:{
lineChart() {
const myChart = echarts.init(document.getElementById('line'));
/*
* ..
*/
//清除画布，这样重新绘制的时候就不会遗留之前的数据
myChart.clear();
// 绘制图表
myChart.setOption(options);

// 这个counst.length是渲染数据的长度
//第一个50是为我给每个柱状图的高度，第二个50是为柱状图x轴内容的高度(大概的)
const autoHeight = this.counst.length * 50 + 50
//以下两个方法改变高度都可以
/**
* 　myChart.getDom().style.height = autoHeight + "px";
*/
myChart.resize({height: autoHeight})
},
}
}

随着屏幕大小调节图表

dialogVisible: false,
echartdata:[]
handleClose() {
this.dialogVisible=false
},

clicktable(val){
this.dialogVisible= true
this.echartdata=val
console.dir(this.echartdata)

this.initChart()
},
initChart() {

let getchart = echarts.init(document.getElementById('echart-line'));
var option = {

tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},

series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data:this.echartdata,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
]
};
getchart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
getchart.resize();
});
},

@row-click="clicktable"

关系图

legend对应 categories数据，

这可以实现单向箭头edgeSymbolSize: [1, 5],
edgeSymbol: ['circle', 'arrow'], 设置连接线字体样式，

force下repulsion: 1700设置线长度

opacity 不透明度 series lineStyle里设置会影响线的透明度，

focusNodeAdjacency: true, 突出有连接关系的。灰掉没关系的

从索引最大值开始删除，采用递减的方法，这样索引便不会移动改变了。

如果你使用了一些预处理的东西，如 sass 你可以通过 /deep/ 来代替 >>> 实现想要的效果。

如果是 el-dialog之中放图表就比较简单了，只要在 dialog 出现之后再 init 图表就可以了。

echart多次动态渲染值，值、事件重复互相影响,

在init方法前，添加如下代码：
let myChart=echarts.init(document.getElementById('xx'));
var myChart = null;
if (myChart && myChart.dispose) {
myChart.dispose();
}

echarts柱状图显示横向滚动条以及柱状上方显示数据

当echarts中数据过多，为其添加横向滚动条，在其配置中添加如下代码
dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 50
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 50
          }
        ]

selected: {
    // 选中'系列1'
    '系列1': true,
    // 不选中'系列2'
    '系列2': false
}
echarts 为x轴、y轴添加滚动条

dataZoom: [
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 0, //数据窗口范围的起始百分比
end: 36
},
{
type: 'inside',
yAxisIndex: [0],
start: 0,
end: 36
}

this.tables= ['全选', ...this.tables];
this.RateLine=[{
name: '全选',
type: 'bar',
},...this.RateLine]series: this.RateLine
};
var selectArr = Robotoption.legend.data;
getchart.on('legendselectchanged', function(obj) {
var selected = obj.selected;
var name = obj.name;

// 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
// 使得无 selected 对象

if (name == '全选') {//需要配置一个legend为‘全选’的名称
var flag = $(this).attr('flag');

if (flag == 1) {
var val = true;
$(this).attr('flag', 0);
$(this).val('全选中');

}else if(flag==undefined) {
var val = false;
$(this).attr('flag', 1);
$(this).val('全不选');

}else{
var val = false;
$(this).attr('flag', 1);
$(this).val('全不选');

}
var obj = {};
for(var key in selectArr){
obj[selectArr[key]] = val;
}
Robotoption.legend.selected = obj;
getchart.clear();
Robotoption && getchart.setOption(Robotoption);
}
}, {once: true})
getchart.clear();
Robotoption && getchart.setOption(Robotoption);

JavaScript 点击事件只执行一次的方法

}, {once: true});

方法二、如果浏览器不支持once，有一种比较简单的做法是在元素被点击后，移除元素的onclick事件。 .addEventListener("click", onClick);

设置安全基线颜色

{
name: '全选',
type: 'line',
markLine: {
silent: true,
lineStyle: {
normal: {
width: 5,
color: '#fe0600' // 这儿设置安全基线颜色
}
},
data: [{
yAxis: 100
}],
label: {
normal: {
formatter: '安全\n基线' // 这儿设置安全基线
}
},
},

5 CSS

设置 div 元素的不透明级别：opacity:0.5;

div里面的内容缩放

{
transform: scale(1,1);
-ms-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法格式如下：
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;
horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr：垂直方向内内容从上到下，水平方向从左到右
sideways-rl：内容垂直方向从上到下排列
sideways-lr：内容垂直方向从下到上排列

鼠标停留时显示区域太多滚动条

tooltip: {
enterable:true,
extraCssText:'max-height: 60%;overflow: auto;',

父组件改变子组件样式

深度选择器你子组件使用了 scoped 但在父组件又想修改子组件的样式可以通过 >>> 来实现：

设置表头高度

.el-table__header tr,
.el-table__header th {
padding: 0;
height: 40px;
}

6 React

高阶组件(HOC)

是 React 中用于复用组件逻辑的一种高级技巧,高阶组件是参数为组件，返回值为新组件的函数

这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel"

接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”。子组件向父组件通信props + 回调方式

基于类并且继承父类React组件，子类就能使用react所提供的特性。

param.append("file", e.target.files[0]);

4.多用 props，少用 state，

也就是多写无状态组件（因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。）。
React的请求应该放在异步请求是在componentDidmount生命周期中中进行

3.没有state的叫做无状态组件（函数组件），有state的叫做有状态组件；

三层架构主要是指

将业务应用规划中的表示层 UI、数据访问层 DAL 以及业务逻辑层 BLL

React 支持一种非常特殊的属性 Ref ，

你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。

这样就可以确保在任何时间总是拿到正确的实例。

var input = this.refs.myInput;

var inputValue = input.value;
可以通过React.createRef()创建Refs并通过ref属性联系到React组件。Refs通常当组件被创建时被分配给实例变量，这样它们就能在组件中被引用。

从子组件中更新父组件的 state

你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。

父组件

handleChange(event) {
this.setState({value: '菜鸟教程'})
}

子组件

构造函数是唯一能够初始化 this.state 的地方。

{}用来指定对象中可以包含哪些属性
语法: {属性名:属性值,属性名:属性值}

在属性名后边加上?，表示属性是可选的[propName: string]

: any表示任意类型的属性

abort() 立即终止当前进程,产生异常程序终止进程终止时不会销毁任何对象

//在实例方法中，this就表示当前当前的实例
//在构造函数中当前对象就是当前新建的那个对象
//可以通过this 向新建的对象中添加属性

使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px

在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。
因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

4,其它

开发模式：

npm run dev是前端自己开发用的

生产模式：

npm run build 打包之后给后端放在服务端上用的

new Product

Product product = new Product("007", "c500", "nokia", 1250);
Product：对象
product ：对象的实例
=new Product：实例化对象的实例
("007", "c500", "nokia", 1250)：实例化对象时传递的参数，共传递了3个字符型参数，一个数值型参数。
;：结束符

Mongoose中的填充查询（populate）类似关系型数据库中的“连接查询”，通过populate()函数，使你可以在一个文档中引用另一个集合中的文档，并将其填充到指定文档路径中。

exports module.exports

**exports **返回的是模块函数 exports的方法可以直接调用
**module.exports **返回的是模块对象本身，返回的是一个类
module.exports需要new对象之后才可以调用

...在c语言中可代表声明可变参数函数或定义可变参数函数。字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

访问对象属性您能够以两种方式访问属性

objectName.propertyName或者objectName["propertyName"]
访问对象方法：objectName.methodName()
如果您不使用 () 访问对象，则返回函数定义

：person.fullName;
function() {

return this.firstName + " " + this.lastName;

}

文件夹指向（符号链接） mklink /d "C:\a" "D:\b"

git查看状态，

发现相同文件add时出现冲突(可能按了自动提交到本地仓库时，按到了哪个选项而出现的问题)
重新加入到本地缓存 git add .
查看状态，解决冲突git status

taskkill /f /t /im nginx.exe 已终止 PID 12872 (属于 PID 2952 子进程)的进程。

当在声明路由是添加了 Affix 属性，则当前tag会被固定在 tags-view中

for(var i = childs.length - 1; i >= 0; i--) {
alert(childs[i].nodeName);
f.removeChild(childs[i]);
}

//this.tableLabel的label 是日期格式的就添加到ro 中，

用于折线图x轴
var reg = /^(\d{4})-(\d{2})$/;
for(var i=0;i<this.tableLabel.length;i++) {
if (reg.test(this.tableLabel[i].label)) {
this.ro.push(this.tableLabel[i].label)
}
}

清除定时器，停止刷新 interval1设置定时器每隔几秒翻页

=setInterval(fnSearch,5000);
clearInterval(interval1);

如下示例使用表格展现数据值：
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}

解决：'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序或批处理文件webpack-dev-server错误法则：

前往项目根目录删除node_modules文件夹，然后在项目根目录路径下的终端运行"npm install"等待安装完之后，再次运行“npm run dev”，有些人的是马上就可以了，然而往往还会有人（譬如我）仍然报类似的错误，这个时候你只需要再次重复相同的操作即可，“一次不成再删再安装

Copy Reference 复制参考 Ctrl+ Alt+ Shift+C
Paste from History。Ctrl+ Shift+V
Paste without Formatting 粘贴不格式化Ctrl+ Alt+ Shift+V
Column Selection Mode 列选择模式Alt+ Shift+ Insert
Find Usages 发现用途CtrI+G
Refactor 重构
Folding 折叠
Go To去
Generate... 产生..。Alt+Insert
Run "index.vue' 运行“index.vue” Ctrl+Shift+F10
Debug "index.vue' Debug“index.vue”
Run 'index.vue' with Coyerage 用Coyerage运行‘index.vueCreate "index.vue'.. 创建“index.vue”。
Show in Explorer 在资源管理器中显示
Open in Terminal在航站楼开放
Open in Browser开放浏览器
Local History地方历史

Update tag with Emmet

Show Applied Styles For Tag 显示标签的应用样式P+ Compare with Clipboard P+与剪贴板的比较

File Encoding 文件编码
Diagrams 图解
Create Gist.. 创建Gist..。
Evaluate XPath... 评估XPath..。Ctrl+Alt+X, E
Show unique XPath 显示唯一的XPathCtrl+Alt+X, P

New 新的
Cut 切割
Copy 复制
Copy Path 复制路径 Ctrl+ Shift+C
Copy Relative Path 复制相对路径Ctrl+ Alt+ Shift+C
Paste浆糊 Ctrl+V
Find Usages 发现用途 Ctrl+G
Find in Path...在路上找到..。Ctrl+H
Replace in Path...替换路径..。
Inspect Code... 检查密码..。
Refactor重构
Add to Favorites 添加到收藏夹
Show Image Thumbnails 图像缩略图
Reformat Code 重格式化码 Ctrl+Alt+L
Optimize Imports 优化进口Ctrl+Alt+O
so所以
Show in Explorer在资源管理器中显示
Open in Terminal在航站楼开放
Local History地方历史
in在……里面
Git
Synchronize 'eh-amp-webapp'同步“eh-amp-webapp”
Directory Path 目录路径 Ctrl+Alt+F12
rm 雷姆
Compare Wit... 比较一下.CtrI+D
Mark Directory as 标记目录为
Remove BOM 删除BOM
Diagrams 图解
Create Gist.. 创建Gist..。

Sequence 序列
Assign 指派 ctrl+k 名字1
Attach Window 附窗
Open Browser 开放浏览器名字1 Do
Attach Browser 附加浏览器 Selector 选择浏览器 IE gg
Open Application 开放式应用
Invoke Workflow File 调用工作流文件
While 当
Condition 条件
Missing or invalid activity 缺失或无效活动
Excel Application Scope Excel应用范围
Read Range 读取范围 Output 输出量 DataTable 数据表。
Save Image 保存图像

For Each Row 每一行
for each row每行受影响,触发器都执行,叫行级触发器。 oracle触发器中分行级触发器和语句级触发器,可不写for each row,无论影响多少行都只执行一次。
foreach循环用于列举出集合中所有的元素，foreach语句中的表达式由关键字in隔开的两个项组成。in右边的项是集合名，in左边的项是变量名，用来存放该集合中的每个元素。
Filter Data Table 过滤数据表
Output Data Table 输出数据表
Get Full Text 获取全文
State Machine 状态机
Filter Wizard 过滤向导点击进去输入输出数据表 Filter Rows 过滤行 Output Columns 输出列 Rows Filtering Mode 行过滤模式 Keep 保持 Remove 去除 Column 列
Operation 操作
Open Workflow 开放工作流
Invoked workflow's arguments 调用工作流参数
Select an item选择一项
Start 启动
Write Range 写入范围 Input 输入 DataTable 数据表
Send Hotkey 发送热键
Delay 延迟
Exit 出口
Entry 入场
Final State 最终状态
Screen Scraping 筛刮
Screen Scraper Wizard 屏幕刮板向导
Scrape Result Preview 刮擦结果预览
Scraping Method 刮擦法
Scrape Options 刮擦选项

Read Cell 读单元 Output 输出量 Result 结果
Type Into 输入名字2
Get text 获取文本 value ctrl+k 名字3
Write Line 写线 Writeline 是输出字符串,Readline是读取字符串 Text 名字3
Ignored 被忽视
lgnored Activities lgnored活动
4 action(s) 4项行动
Double click to view 双击查看

Substring(startindex,length) 函数指从第startindex个字符开始截取长度为length的字符串
txtShow.Text.Substring(0, txtShow.Text.Length - 1)即从第0个字符开始截取长度为txtShow.Text.Length - 1的字符串，结果即为去掉txtShow.Text的最后一个字符；

Load Jar 加载jar包
Java Scope Java范围
Invoke Java Method 调用Java方法
Invoke KillAlProcesses workflow 调用KillAlProcess工作流
Inwoke DateClearworkflow Inwise DateClear工作流

Method Name 方法名称
Target Object 目标对象
Target Type 目标类型

Rename (F2)重命名(F2)
Open打开
Collapse 塌陷
Expand in Place 扩张到位
Cut 切割
Copy 拷贝副本
Paste 粘贴
Delete 删除

Annotations 注释
Add Annotation (Shift+F2) 添加注释(Shift+F2)
Edit Annotation 编辑注释
Delete Annotation 删除注释
Show All Annotations 显示所有注释
Hide All Annotations 隐藏所有注释
Delete All Annotations 删除所有注释

Copy as Image 复制为图像。
Save as Image 保存为图像
Create Variable 创建变量
Auto Arrange 自动排列
Remove Surrounding Sequence 删除舍入序列
Surround with Try Catch (Ctrl+T) 包围尝试捕捉(Ctrl+T)
Extract as Workflow 提取为工作流
Open Workflow 开放工作流
Enable Activity (Ctrl+E) 启用活动(Ctrl+E)
Disable Activity (Ctrl+D) 禁用活动(Ctrl+D)
Toggle Breakpoint 切换断点
Edit Breakpoint Settings 编辑断点设置
Run to this Activity 跑到这个活动
Run from this Activity从这个活动中跑出来
Test Activity测试活动
Help帮助