笔记

笔记

1.Vue-Injection elForm not found

1）将el-form-item标签是否在el-form标签包裹下

2. 修改element-ui的table 在鼠标悬停hover时的高亮颜色

css:

.el-table tbody tr:hover>td { 
    background-color:#ecf5ff!important
}

3.Property xxx was accessed during render but is not defined on instance

问题 [https://blog.csdn.net/qq_41499782/article/details/112525805]

当使用element-plus的form表单的时候，ref 里面和 model 里面的绑定的值都时由setup函数返回的，页面里面的form表单无法添加值，并且控制台也报出警告，说form里面的表单的属性渲染通过，但是实例里面没有定义 Property xxx was accessed during render but is not defined on instance

分析

element-plus 中 form表单的model作用
作用：配合表单验证

目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。不信的话，你可以增加一个rules和prop(为了调用验证方法，也el-form也加一个ref属性，相当于id或者class选择器的意思)，但是不写model，然后验证的话，会提示缺少model，导致无法验证成功。

里面的逻辑大概是，在el-form-item上写一个prop，这个prop左手对应着数据源（即用model.prop找到对应的数据源），右手对应着验证规则（即用rules.prop找到对应的规则）。然后就快乐地验证去了。

至于为什么不能将el-form的model+el-form-tem的prop这样的组合和表单中的v-model的用法合二为一，最直观的原因就是：作用于不同的标签，一种是针对表单的双向绑定，一种是针对el-form和el-form-item的验证（虽然这个验证的数据源最终就是表单那边双向绑定得来的）；其次，你感觉一下，一边是利用双向绑定提供数据，另一边是拿到数据和规则进行验证，这两边没有很死板地捆绑在一起啊，类似于耦合度不高，未来自定义或者修改的话会方便很多

vue中ref的作用
vue2 ：通过 vm.$refs来获取ref的指定的元素和dom实列
vue3中：和vue2的用法一样
如果vue3中不使用setup函数，里面的ref是一样的，但是如果使用setup的话，并且如果ref绑定的值是setup返回的话，就会产生后面的结果。作为模板使用的引用与任何其他引用的行为一样:它们是响应式的，可以传递给(或从)composition 函数中返回，我们可以很简单的理解，就是ref可以直接绑定 setup中返回的值，在虚拟DOM修补算法,如果VNode ref的键对应一个裁判在渲染上下文,VNode的相应元素或组件实例的值将分配给裁判。这是虚拟DOM挂载/补丁过程中执行,所以参模板后只会分配值初始渲染. 原文
回到我们的代码中，我们可以发现，我们from对象在dom编译挂载的时候，已经被改变了，所以页面上才会出现model 和那些属性不存在的问题。

import {ref,onMounted} from "vue";
export default {
  setup() {
    // 连接的地址，或者文件
    const formRef = ref({
      text: '',
      margin: 0,
      size: 100,
      mainColor: '#000',
      subColor: '#fff'
    });
    onMounted(() => {
      // the DOM element will be assigned to the ref after initial render
      console.log(formRef.value,'===------') // 打印的是一个dom对象
    })
    console.log(formRef.value) // 这行代码会先打印，打印我们的form对象，原因是 js的事件循环机制
    return {
      form: formRef,
    };
  },
 

解决方案

如果不需要做表单验证，可以不需要使用model，可以不使用这个属性
如果需要做表单验证，ref 和 model 绑定的值不一样，就不会出现这个问题了