当前位置：首页 > news >正文

点击取消按钮，console出来数据更改了，页面视图没有更新

news 2025/7/21 14:17:59

前言

实现效果：点击取消按钮，页面视图全部为空，
遇到的问题：点击取消按钮，console出来数据更改了，SchemaJson 都是默认值啦，页面视图没有更新
在这里插入图片描述
方法：使用 key 属性实现局部强制刷新

<template><div class="app-container"><el-form :model="fromModel" label-width="100px" :rules="rules" ref="FormRef" ><el-form-item label="数据格式"><json-schema :schema.sync="fromModel.SchemaJson" :show-default-value="true":is-mock="false"></json-schema></el-form-item><el-form-item><el-button type="primary" :loading="upload.isUploading">确 定</el-button><el-button @click="cancel">取 消</el-button></el-form-item></el-form></div>
</template><script>import jsonSchema from '../json-schema-editor.vue'export default {name: "algorithmCom",components: { uploadCom, jsonSchema },data() {return {upload: {isUploading: false,},fromModel: {SchemaJson: {"type": "object","properties": {},},},rules: {},};},methods: {cancel() {this.fromModel = {SchemaJson: {"type": "object","properties": {},}};this.upload.isUploading = false;this.$nextTick(() => {this.$refs.FormRef.resetFields();});console.log(this.fromModel)},},computed: {},
};
</script>

通过排查发现

使用 key 属性实现局部强制刷新
原理：
在 Vue 中，给组件或者 DOM 元素添加 key 属性，当 key 值改变时，Vue 会认为这是一个全新的元素，从而重新创建和渲染它以及它内部的子元素，达到强制局部刷新的效果。
应用示例：
首先，在你希望实现局部刷新的表单元素外层添加 key 属性，并在 data 中定义对应的响应式数据来控制这个 key 值，比如针对整个 el-form 表单区域进行局部刷新：

   <el-form :model="fromModel" label-width="100px" :rules="rules" ref="FormRef" :key="formKey"> </el-form>

然后在 data 函数里添加 formKey 这个响应式数据：

  data() {return {// 用于控制 key 值变化，实现局部刷新formKey: 0};},

最后，在 cancel 方法中改变 formKey 的值来强制表单区域重新渲染，实现局部刷新：

   cancel() {this.fromModel = {SchemaJson: {"type": "object","properties": {},}};this.upload.isUploading = false;// 改变 key 值，触发局部重新渲染this.formKey++;this.$nextTick(() => {this.$refs.FormRef.resetFields();});},