一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。(juejin.cn/post/705288… "juejin.cn/post/705288…
dialog 里面嵌套有弹层会处于置灰状态
两种路由传参
级联选择器 要考虑这三种情况：
filter 传参
两位小数加减问题
我们计算标准是保留三位小数再向上取整之后去掉最后一位
/* 保留3/2位小数 */
export const saveSmallNumber = (number,cut=2) => {
console.log("typeof number",typeof number);
console.log("number",number);
let result = null;
const arr = String(number).split(".")
const intFirst = arr[0]
const intEnd = arr[1]
// 截取前三.四个
const numberEnd = intEnd.substring(0, cut+1);
// 取最后一位加0.x
const last = numberEnd.charAt(numberEnd.length - 1) //charAt() 方法从一个字符串中返回指定的字符。
const newstr = `0.${last}`
// 四舍五入
const isPlusOne = Math.round(Number(newstr));
console.log("isPlusOne",isPlusOne);
let temp = ""
if (isPlusOne === 0) {
result = Number(number).toFixed(cut);
} else { // 1
let a =Number(intEnd.substring(0, cut)) + 1
console.log('a',a);
temp = String(a)
console.log("intFirst",intFirst);
console.log("temp",temp);
result = Number(intFirst + '.' + temp);
console.log("result44444",result);
}
return result;
};
toFixed 就行了
禁用css
css鼠标移上显示红色禁止符号
// 以下两个css表达式皆为一个红色的圈加一个斜杠，表示禁止的意思
cursor:no-drop
cursor:not-allowed
[elementui 禁用radio]
谷歌浏览器NetWork 不显示请求报文
vue2中使用var()函数
在vue中实现了在样式里使用js变量的方法，及通过css定义变量的方式，将变量在行内注入，然后在style中使用var()获取我们在行内设置的数据即可。以后，在封装一些需要动态传入样式参数的ui组件是不是简便了不少。
需要注意的点是： 1.变量的作用域就是它所在的选择器的有效范围。 2.注意：var()函数完全不兼容ie
我这里是根据父组件传值来改变子组件中的样式：
element ui table 禁用掉多选框
单精度浮点数与双精度浮点数
请求高德地图不要在请求头乱加东西
父元素设置了最小高度 子元素设置高度100%不生效
父元素必须是固定高度才生效
flex 布局
滚动失效
el-checkbox
el-checkbox 绑定的是循环体 无法选中 只能显示初始值
只改变了 但是页面没有修改
方法一 ：用vue.$set方法，强制vue监听checked属性 还是没用
参考： blog.csdn.net/jerryyang_2…
在change绑定： this.$forceUpdate(); 给他强制更新一下就好了，目前没有找到更有用的方法，比较简单暴力！ www.csdn.net/tags/OtTaYg…
不要在table里面嵌套弹层 拿不到row
用个变量保存起来
单独校验
this.$refs.ruleFormRef.validateField(item.quantity, (errMsg) => {
if (errMsg) {
console.log('大于库存')
}
})
element 校验失灵
Element Warn please pass correct props!
需要给 v-if 的元素添加唯一键 key 即可解决
element ui 校验input 输入了边框样式变红
这个滚动条不错
color:#4393e3;
在不同页面用到的相同的组件
打个比方说 两者都要调用不同的方法 得设置不同的options参数来控制
数字键盘点变成了 del
关于按小键盘的句点删除的是光标后面的内容的解决方法
JS，对数字实现三位分割显示
1..toLocaleString()
/**
* 对数字进行三位分割
* @param {*} value 需要进行分割的数字
* @returns 返回分割后的数字串
*/
// 小数部分只显示两位小数
export function NumFormat(value) {
if (!value) return '0'
var intPart = Number(value).toFixed(0) // 获取整数部分
var intPartFormat = intPart.toString()
.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
var floatPart = '.00' // 预定义小数部分
var value2Array = value.toString().split('.')
// =2表示数据有小数位
if (value2Array.length === 2) {
floatPart = value2Array[1].toString() // 拿到小数部分
if (floatPart.length === 1) {
// 补0
return intPartFormat + '.' + floatPart + '0'
} else {
return intPartFormat + '.' + floatPart
}
} else {
return intPartFormat
}
}
时间日期选择器
不加 type="datetime" 不加没有确认按钮
过滤查询参数
如果参数为0 是不不保留字段的
const subObj = {};
for (let key in this.inquiryObj) {
if (this.inquiryObj[key] === 0 || this.inquiryObj[key] ) {
subObj[key] = this.inquiryObj[key];
}
}
Element ui —— dialog 弹窗 设置点击空白处不关闭
<el-dialog title="添加" :visible.sync="dialogFormVisible" :close-on-click-modal="false"> </el-dialog>
v-if 与 v-for 同时存在的场景
把v-for 挂在template上
注意的点：
<template>元素不会出现在最终的渲染结果中。假如给<template>元素绑定key，相当于key值就丢失了，等于没有绑定。
<template v-for="childItem in item.children" :key="childItem.id">
打印
这三个是没有输出的
$route.fullPath 应用场景 就是同一个页面 两个路由都用到的时候 路由改变但是页面没有刷新
<router-view :key="$route.fullPath"></router-view>
