开发笔记04

尤雨溪不懂VUE
97 阅读1分钟

阻止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; }

暴漏数据

image.png

image.png

传递这两个参数可以根据属性进行排序

image.png

按钮提交前使用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
        });
}

使用字典

配置后先引入字典

image.png

直接使用

<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文件数据的方法

image.png

v-for也可以循环methods里面方法返回的数据

image.png

后代选择器和嵌套选择器

image.png

第二种写法虽然推荐，但是老版本的google不支持这种最新的CSS3写法

渲染方式不同（分别为第一种和第二种方法的渲染方式）

image.png

image.png

image.png

watch使用immediate:false为什么还会立即执行

这种情况一般是在子组件中监听props的数据产生的，一般通过添加判断来控制watch里面的逻辑。

image.png

watch无法监听提高到变化的情况

watch 在以下情况下可能无法监听到变化：

  1. 直接通过索引修改数组元素：当你直接通过索引修改数组元素时，Vue 无法捕获到这种变化。例如：this.array[0] = newValue;。为了让 Vue 能够监听到数组元素的变化，你可以使用 Vue.set() 或 this.$set() 方法来修改数组元素。
  2. 直接修改对象属性：如果你直接修改对象的属性值而不是重新赋值整个对象，可能会导致 watch 无法触发。Vue 只能追踪到对象的引用变化，而不是对象属性的内部变化。为了让 watch 能够监听到对象属性的变化，你可以使用 Vue.set() 或 this.$set() 方法来修改对象属性，或者使用 Object.assign() 或扩展运算符创建一个新对象。
  3. 在对象或数组被冻结时：如果你使用 Object.freeze() 冻结了一个对象或数组，watch 将无法监听到任何属性或元素的变化。
  4. 在声明 watch 时未指定 immediate: true 且在初始化时没有触发变化：如果你在声明 watch 时未设置 immediate: true，并且在初始化时没有触发属性的变化，watch 将无法监听到初始值。
  5. 对象或数组的嵌套层级过深：如果对象或数组的嵌套层级非常深，超过 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');

    // ...
  }
}
avatar
文章
阅读
粉丝