1 下拉多选的变字符串和编辑变数组
.join(',') 变字符串 .split(',') 变数组
2 一行代码实现数组去重
[...new Set(arr)] PS:arr是要去重的数组
3获得某个字符的位置
s.indexOf(":")
4 截取字符串的长度 待补充
.substring(0, 2) 截取前两位
5 两个数组对象 某一值相同 提取值
const getArr = data.filter((item) => list.some((it)=> it.langName === item.langName));
6 数组对象排序
this.productTransSchemes = res.data.productTransSchemes
this.productTransSchemes.sort(function(a, b) {
return a.serviceIndex - b.serviceIndex
})
serviceIndex 是数值
7 如何优雅判断属性值为空
let datas = { num:"", str:"hello", flag:"" } // 进行遍历，为空的不传递
for( let key in datas){
if(datas[key] == ""){
delete datas[key]
}
}
作者：资深Bug开发大师 链接：juejin.cn/post/704470…
8 对象合并
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3,a:2};
Object.assign(o1, o2, o3);
console.log(obj)
9 this.$nextTick是在Dom元素全部执行完后执行
this.$nextTick(()=>{ this.toggleSelection([...this.tableData])
此错误一般多出现在 created() 中， Vue 中数据渲染和DOM 元素渲染是异步的，此时可能会出现加载先后的问题。在DOM 元素渲染未完成的情况下，去操作DOM元素就会出现问题。 this.$nextTick 可解决此问题。
10 数组对象去重
let obj = {};
arr = arr.reduce(function(item, next) {
obj[next.key] ? '' : obj[next.key] = true && item.push(next); return item;
}, [])
11 Element-ui在Table表格中嵌套input、select等表单控件的校验
<el-form-item
label="危品等级："
:prop="'list.' + i +'.dgClass'"
:rules="{ required:cargo.cargoType=='DG'||cargo.cargoType=='RD'||cargo.cargoType=='AD', message: ' ', trigger: 'change' }"
>
12 获得两个数组对象的不同项
excelList是数组对象
objs是数组[取得要判段的值组成的数组]
const objs = this.excelList.filter(function(item) {
return arr.indexOf(item.loadPlanNo) == -1
})
13 JS——获取对象中键值对个数
let obj = { "name":"ximing", "age":18 }; console.log(Object.keys(obj).length); 2
14 el-dialog嵌套遇到的遮罩问题
里面的 嵌套的el-dialog设置:append-to-body="true"
15 富文本使用时要注意的东西
解码：decodeURIComponent（反显的时候用） 转码：encodeURIComponent（新增或修改的时候 提交用）
16 Vue-quill-editor富文本 上传1900宽度图片 复显控制最大宽的方法
this.productDefine.quoteIntroduce = this.productDefine.quoteIntroduce.replace(/<img/g, "<img style='max-width:1000px;height:auto;'")
17 tabel表格加校验的红点 slot="header"
<template slot="header">
<span> 箱重(吨)</span>
</template>
18 el-tabel 上下页多选全部获得
<el-table
ref="table"
:row-key="getRowKeys"
>
<el-table-column
type="selection"
align="center"
:reserve-selection="true"
width="55"
/>
</el-table>
getRowKeys(row) {
return row.id
}
需要在tabel里加 ref="table" :row-key="getRowKeys" 多选框里加 :reserve-selection="true"
19 百度变灰
.tb-allpage-filter {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1)
}
20 数组对象条件去重
distinctmore(arr, key1, key2, key3) {
const newArr = [];
for (let i = 0; i < arr.length; i++) {
let flag = true;
for (let j = 0; j < newArr.length; j++) {
if (
arr[i][key1] == newArr[j][key1] &&
arr[i][key2] == newArr[j][key2] &&
arr[i][key3] == newArr[j][key3]
) {
flag = false;
break;
}
}
if (flag) {
newArr.push(arr[i]);
}
}
return newArr;
}
21左边随右边的宽变化
<div :span="24" class="pszjyj">
<div class="pszjyjLeft">电子围栏:</div>
<div class="pszjyjRight">{{ formData.item?formData.item.celectronicFence:'' }</div>
</div>
.pszjyj{
border: 1px solid #DDDDDD;
border-top: 0;
overflow: hidden;
background-color: #F5F5F5;
.pszjyjLeft{
width: 139px;
font-size: 12px;
padding-right: 12px;
float: left;
font-weight: 700;
height: 30px;
line-height: 30px;
text-align: right;
}
.pszjyjRight{
width: calc(100% - 140px);
padding: 5px;
background-color: #fff;
border-left: 1px solid #DDDDDD;
float: left;
}
}
22 Form正则
rules: { task_name: [ { required: true, message: '请输入名称', trigger: 'blur' }, { pattern: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,20}$/, message: '格式不正确' } ] }
23 axios的 post 请求后台接受不到!
axios默认是 json 格式提交,确认后台是否做了对应的支持;若是只能接受传统的表单序列化,就需要自己写一个转义的方法...当然还有一个更加省事的方案,装一个小模块qs.
npm install qs -S
// 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的.
// 具体可以看看我 axios 封装那篇文章
//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
config => {
// 在发送请求之前做某件事
if (
config.method === "post"
) {
// 序列化
config.data = qs.stringify(config.data); // ***** 这里转义
}
// 若是有做鉴权token , 就给头部带上token
if (localStorage.token) {
config.headers.Authorization = localStorage.token;
}
return config;
},
error => {
Message({
// 饿了么的消息弹窗组件,类似toast
showClose: true,
message: error,
type: "error.data.error.message"
});
return Promise.reject(error.data.error.message);
}
);
24 关于两个字的判断显示
{{ text =='1' ? '是' : '否' }}
25 关于添加动态对象属性
当给对象添加属性时，如果属性名是动态变化的，该怎么处理。
let obj = {};
let index = 1;
obj[`topic${index}`] = '话题内容'
26 tabel只有code转译
:formatter="xx"
在methods里
// 查询列表结果-发布标志翻译
xx(data) {
const bizCateObj = this.orderStatusOptions.find(item => item.lbCode === data.orderFlag)
if (bizCateObj) {
return bizCateObj.lbName
}
},
27 领导查看代码给出的建议
this.sailSchedules.shipCnName = obj.shipNameCN // 中文船名 这是我写的
//下面是组长说的 膜拜
this.sailSchedules['shipCnName'] = obj.shipNameCN || ''
this.$set('$data', 'shipCnName', obj.shipNameVoy || '')
this.$set(this.sailSchedules, 'shipCnName', obj.shipNameCN || '')
28 同事设置未来时间禁用
<el-date-picker
v-model="dateArr"
:picker-options="expireTimeOption"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
ormat="yyyy-MM-dd"
:clearable="false"
value-format="yyyy-MM-dd"
/>
</el-form-item>
expireTimeOption: {
disabledDate(date) {
return date.getTime() > Date.now()
}
},
el-time-picker 选择完以后鼠标覆盖会再次弹出选择框这个问题咋解决吗 官网也是有这个问题
.el-time-panel {
transition: none;
}
循环对象{} 拿到键值key
let obj = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};
if ('a' in obj) {
console.log('对象包含键 "a"');
} else {
console.log('对象不包含键 "a"');
}
