Vue 碎知识
1，Vue
1，$nextTick
$nextTick的用法_风如也的博客-CSDN博客_$nexttick的使用
实现全屏效果，把内容展示在全屏状态对话框里面
，
:visible.sync="dialogVisiblefull"
:fullscreen="true"
:before-close="()=>{dialogVisiblefull = false}">
，
当点击全屏，先触发对话框，onclick: function () {
//方法1 对话框
self.dialogVisiblefull = true
self.$nextTick(function () {
self.arrange('Robotoptionfull')
})
}
vue的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
通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
justify="end"
justify="space-between"
justify="space-around"
使用 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 实现动态表格/表单(新增/删除行)
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
在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页 切换
人员信息
tab页，但是vue会帮你把你写的所有tab页的内容都渲染出来了如果每个tab页的数据都过大的时候，可能就会导致首次打开页面卡顿现象当v-if的值为false时vue是不会去渲染该标签下的内容的就把tabs下的子模块
标签上加v-if，一开始只设置其中一个为true其他都为false，当点击tab切换时去改变v-if的值，代码如下↓
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 // 不禁用
}
}
实现全屏效果，把内容展示在全屏状态对话框里面，
:visible.sync="dialogVisiblefull"
:fullscreen="true"
:before-close="()=>{dialogVisiblefull = false}">
，
当点击全屏，先触发对话框，
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
老虎
在旧版本中slot="xxx"的情况下，可以挂载在非 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。
是在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接收传递过来的参数。
直接传值
间接传值
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 模板中会被自动转换为全小写
当组件渲染的时候，子组件 里的
插槽内可以包含任何模板代码，包括 HTML：甚至其它的组件
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
v-slot 只能添加在 上
当被提供的内容只有默认插槽时，组件的标签可以被当作插槽的模板template来使用，可以把 v-slot 直接用在组件上：
v-slot 的缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。
例如 v-slot:header 可以被重写为 #header：
动态组件 & 异步组件
在动态组件上使用 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颜色最终实现效果
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)
const array = [];
for (let i = 0; i < treeData.length; i += 1) {
let match = false;
for(let pro in treeData[i]){
if(typeof(treeData[i][pro])=='string'){
match |= treeData[i][pro].includes(searchValue);
if(match) break;
}
}
if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match ) {
array.push({
...treeData[i],
children: this.handleTreeData(treeData[i].children, searchValue),
});
}
当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 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'}"
//获取禁用的日期
format="d"
:picker-options="pickerOptions"
v-model="tablelist.actives"
placeholder="选择一个或多个日期"
>
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
year.push(years);
}
var days=[];
for(var ii = 0; ii < year.length; ii++) {
for (var month = 1; month <= 12; month++) {
let day = new Date(year[ii], month , 0).getDate();//获取每月天数
days.push(day);
if (day>28){
//.getTime() year,i,
for (var j = 29;j<=day; j++){
this.dateDisabled.push(new Date(year[ii],month,j ).getTime())
}
}
}
}
console.log(this.dateDisabled)
},
在方法名后面加上.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();
文件上传
如果只是简单的文件上传，则可以直接使用原生以及各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实现圆形显示鼠标单击位置
window.onload = function(){
var mouse = document.getElementById('mouse');
//需求：鼠标在页面上单击时，获取单击时的位置，并显示一个小圆点
document.onclick = function() {
mouse.style.display = 'block';
// 获取事件对象的兼容处理
var targetX = event.clientX - mouse.offsetWidth / 2;
var targetY = event.clientY - mouse.offsetHeight / 2;
// 在鼠标单击的位置显示
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
}.mouse{position:fixed;background:#ffd965;width:40px;height:40px;border-radius:20px;display:none;}
数组对象排序
每个元素并非是数组，而是对象值比较排序，必须传入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 中用于复用组件逻辑的一种高级技巧,高阶组件是参数为组件，返回值为新组件的函数