Vue2 生命周期:
即Vue实例在创建到销毁的一系列过程
1.创建 -> 2.初始化数据 -> 3.编译template -> 4.挂载DOM -> 5.渲染 -> 6.更新渲染 -> 7.卸载
常见的生命周期:
beforeCreate: 实例创建之初
created: 组件已经创建完成
beforeMounte: 组件挂载之前
mouned: 组件挂载完成
beforeUpdate: 数据发生变化,更新之前
updated: 数据发生变化更新后
beforeDestory: 实例销毁前
detoryed: 销毁后
activated: keep-alive组件激活
deactivated: keep-alive组件停用
errorCaptured: 捕获实例的错误
Bug记录
el-form 表单中数据有了但是校验还在?
原因是: el-form model 绑定的数据嵌套多层, 而 el-form-item 的 prop 只绑定了最里层, 应该把级联的嵌套都绑定上
el-table 在表头添加提示信息
<el-table-column
prop="ownTimeFlag"
label="按占有时长计费"
show-overflow-tooltip>
<template slot-scope="{}" slot="header">
<span>是否按占有时长计费</span>
<el-tooltip class="item" effect="dark" placement="top">
<i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
<div slot="content">
<p>是否按占有时长计费(后付费生效):</p>
<p>选择是:计量数据大于0,将会忽略计量数据与公式的计算,直接计算整个时段(计量周期)费用。如:按日月结选择是,用1秒也按1天计费。</p>
<p>选择否:计量数据与配置的公式进行计算。</p>
</div>
</el-tooltip>
</template>
<template slot-scope="scope">
{
{
scope.row.ownTimeFlag ? '是' : '否'}}
</template>
</el-table-column>
const form1 = new Promise((resolve, reject) => {
this.$refs["formRef1"].validate((valid) => {
if (!valid) {
this.$message.warning("表单1中信息填写不完整");
} else {
resolve();
}
});
});
const form2 = new Promise((resolve, reject) => {
this.$refs["formRef2"].validate((valid) => {
if (!valid) {
this.$message.warning("表单2中信息填写不完整");
} else {
resolve();
}
});
});
Promise.all([form1, form2]]).then(() => {
// ...
})
// 另一种需要调完某个接口之后再调用另一个接口
let p1 = new Promise((resolve, reject) => {
let params = {
};
update(params).then((res) => {
if (res.code == "200") {
resolve();
} else {
reject();
}
});
});
p1.then(() => {
// ...
});
Bug记录
广西智慧仓储项目,部署之后,所有样式都失效了
原因很可能是 nginx.conf 文件配置有问题,导致css未生效.
Bug记录
父组件传值给子组件,子组件始终展示的是初始值
参考了: https://blog.csdn.net/qq_37604998/article/details/119652760
原因: 父子组件加载渲染过程:父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件在父组件挂载完成的时候已经渲染出来了.
解决方法:
(1) 用监听的方式来写.
(2) 父组件中使用v-if来控制子组件是否加载.
(3) 本次解决方法采用的,直接通过方法传值,再在子组件中进行赋值.
// 父组件 中
<detail-dialog ref="detailRef"></detail-dialog>
clickDetail(row) {
this.$refs.detailRef.openDialog(row);
},
// 子组件 中
openDialog(row) {
this.jhDataType = row.jhDataType;
this.dialogVisible = true;
},
父元素: {
display: flex;
overflow-x: auto;
}
子元素: {
flex-shrink: 0;
width: (给一个宽度);
}
const box = document.getElementById('box');
function move(e) {
box.innerHTML = `${
e.offsetX}, ${
e.offsetY}`;
console.log('1')
}
function debounce (func, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, arguments), delay);
}
}
function throttle (func, delay) {
let lock = false;
return function () {
if (lock) return;
lock = true;
setTimeout(() => {
func.apply(this, arguments);
lock = false;
}, delay);
}
}
box.onmousemove = throttle(move, 1000);
box.onmousemove = debounce(move, 1000);
// html代码
<duties-card-list class="wrap" id="btn" :dataList="dataList" @getList="getList(1)">
</duties-card-list>
<!-- 需要加上id=“btn”,方便后面获取元素高度 -->
// js代码
mounted() {
// 监听滚动事件,然后用handleScroll这个方法进行相应的处理
window.addEventListener('scroll', this.handleScroll, true)
},
// 离开这个页面销毁滚动条事件,不然会给每一个页面都触发
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll, true)
},
methods(){
//滚动事件-触底
handleScroll() {
//1.获取滚动区域元素
let btn = document.getElementById('btn')
if (btn) {
//2.获取元素高度
let height = btn.offsetHeight
//3.获取滚动区域到头部的距离
let top = btn.scrollTop || document.documentElement.scrollTop
//4.获取滚动条高度
let scrollHeight = btn.scrollHeight
//5.滚动条到底部的条件
if (top + height == scrollHeight) {
// 滚动区域到头部的距离 + 屏幕高度 = 可滚动的总高度 //触底时自动加载
this.loadMore()
}
}
},
//滚动刷新
loadMore() {
//Math.ceil()向上取整,小数部分直接舍去,并向正数部分进1
if (Math.ceil(this.page.total / this.page.pageSize) > this.page.currentPage) {
this.page.currentPage++
this.getList()
}
},
}
Vue项目 引入LuckySheet
参考链接
Bug记录
[Vue warn]: Injection “elForm” not found
错误原因: 在使用el-form-item标签时,外层没有加el-form,导致出现报错
Bug记录
row is required when get row identity
参考链接
Bug记录
在element ui的表格中每一行数据都有删除当前行数据的操作,在点击删除按钮后要出现气泡弹框提示,但是当点击删除后发现每一行的气泡弹框都弹出来了
解决方法: 给el-popover添加ref属性,值可以是数据的唯一标识,比如id
Bug记录
el-table-column标签内使用v-if判断其显示,出现列错位和列元素渲染异常的问题
分析原因:vue的 风格指南 中介绍,默认情况下,Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时,会修补已存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同,则会导致元素间相互影响,不能正常渲染。
解决方案: 用 key 管理可复用的元素
添加一个具有唯一值的 key attribute,表明该元素是完全独立的,不要复用它 。
<style>
.itemTrading .el-table{
overflow: auto;
}
.itemTrading .el-table__body-wrapper,
.itemTrading .el-table__header-wrapper,
.itemTrading .el-table__footer-wrapper {
overflow: visible;
}
.itemTrading .el-table::after {
position: relative !important;
}
//这里根据自己的项目查看是否需要添加。
//我的页面样式需要将此处的滚动条也进行隐藏。
.body-theme-grenn .el-table--scrollable-x .el-table__body-wrapper{
overflow: visible;
}
</style>
// 把
async handleDelete() {
let folderFilesIds = [1, 2]
this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
await this.confirmHandleFiles(folderFilesIds)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
// 改成以下写法
handleDelete() {
let folderFilesIds = [1, 2]
this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
await this.confirmHandleFiles(folderFilesIds)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
<el-select v-model="selForm.ydlbValue" clearable placeholder="请选择">
<el-option
v-for="item in ydlb"
:key="item.ydlbbm"
:label="item.ydlbmc"
v-html="item.ydlbmc3"
:value="item.ydlbbm">
</el-option>
</el-select>
idjYdlb_selectYdlb(this.jgbm).then(res=>{
for (var i in res.content) {
res.content[i].ydlbmc3=res.content[i].ydlbmc.replace(' ',' ')
}
})
Bug记录
Uncaught TypeError: Cannot read properties of undefined (reading ‘install’)
解决办法:
出现该情况的原因是vue-router安装的版本太高,一般vue2的项目对应的版本是vue-router@3版本
① 在控制台输入: cnpm install --save [email protected] 重新安装vue-router即可解决
如果没有安装cnpm命令的,可以先安装:cnpm install
② 如果安装了cnpm 命令,则在控制台输入: cnpm install --save [email protected] 重新安装vue-router即可解决
③ 没有cnpm命令 也可 则在控制台输入: npm install --save [email protected] 重新安装vue-router即可解决
Bug记录
Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.
修改eslint配置文件
// 将
"parser": "babel-eslint",
// 改为如下
"parserOptions": {
"parser": "babel-eslint"
},
// .eslintrc.js
module.exports = {
env: {
node: true // 只需将该项设置为 true 即可
},
//此处省略其他配置
};
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"plugin:prettier/recommended",
],
parserOptions