开发笔记04
阻止el-tree的悬浮事件
// 阻止el-tree的悬浮事件
::v-deep .el-tree-node__content:hover {
background-color: transparent;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
background-color: transparent;
}
::v-deep .el-table tbody tr { pointer-events:none; }
暴漏数据
传递这两个参数可以根据属性进行排序
按钮提交前使用ruoyi自带loading防抖
submitForm() {
this.$modal.loading();
updateAlertLog(this.infoForm)
.then((response) => {
this.$modal.msgSuccess("修改成功");
this.infoVisible = false;
this.getList();
this.$modal.closeLoading();
})
.catch((e) => {
this.$modal.closeLoading();// 在报错时要自己关闭loading
});
}
使用字典
配置后先引入字典
直接使用
<el-table-column label="处理状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag
:options="dict.type.iot_process_status"
:value="scope.row.status"
/>
</template>
</el-table-column>
或者再select中使用
<el-select
v-model="queryParams.status"
placeholder="请选择处理状态"
clearable
size="small"
>
<el-option
v-for="dict in dict.type.iot_process_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
ruoyi判断是否有权限
<codemirror
ref="editScript"
v-model="scriptTxt"
:class="[
$auth.hasPermi(`RuleLog:RuleInfo:editScript`)
? ''
: 'form-onlyRead',
]"
/>
老版本一个js文件引入另一个js文件数据的方法
v-for也可以循环methods里面方法返回的数据
后代选择器和嵌套选择器
第二种写法虽然推荐,但是老版本的谷歌不支持这种最新的CSS3写法
渲染方式不同(分别为第一种和第二种方法的渲染方式)
watch使用immediate:false为什么还会立即执行
这种情况一般是在子组件中监听props的数据产生的,一般通过添加判断来控制watch里面的逻辑。
watch无法监听提高到变化的情况
watch
在以下情况下可能无法监听到变化:
- 直接通过索引修改数组元素:当你直接通过索引修改数组元素时,Vue 无法捕获到这种变化。例如:
this.array[0] = newValue;
。为了让 Vue 能够监听到数组元素的变化,你可以使用Vue.set()
或this.$set()
方法来修改数组元素。 - 直接修改对象属性:如果你直接修改对象的属性值而不是重新赋值整个对象,可能会导致
watch
无法触发。Vue 只能追踪到对象的引用变化,而不是对象属性的内部变化。为了让watch
能够监听到对象属性的变化,你可以使用Vue.set()
或this.$set()
方法来修改对象属性,或者使用Object.assign()
或扩展运算符创建一个新对象。 - 在对象或数组被冻结时:如果你使用
Object.freeze()
冻结了一个对象或数组,watch
将无法监听到任何属性或元素的变化。 - 在声明
watch
时未指定immediate: true
且在初始化时没有触发变化:如果你在声明watch
时未设置immediate: true
,并且在初始化时没有触发属性的变化,watch
将无法监听到初始值。 - 对象或数组的嵌套层级过深:如果对象或数组的嵌套层级非常深,超过 Vue 内部默认的递归深度限制,
watch
可能无法正确地触发。 总之,watch
在大多数情况下都是可以正常工作的。但在上述情况下,你可能需要采取特殊的操作来确保watch
可以监听到变化。
import Vue from 'vue';
export default {
data() {
return {
myArray: ['apple', 'banana', 'orange']
};
},
created() {
// ...
// 使用$set来监听数组中某一元素的改变
// 1 是索引
this.$set(this.myArray, 1, 'grape');
// ...
}
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgaifbg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24