element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置

先看需求场景(当我们绑定的formData中有嵌套对象时,el-form的resetFields并不能帮我们重置)

vue 复制代码
<template>
    <el-form :model="formData">
        <!--  
        ...
        ...这里el-form-item都绑定了prop
        ...
        -->
    </el-form>
</template>
<script>
export default {
    data () {
        return {
            formData: {
                prop1: '',
                prop2: [],
                prop3: {
                    subProp1: '',
                    subProp2: ''
                }
            }
        }
    }
}
</script>

二次封装覆盖el-form-item源码中的方法

vue 复制代码
<script>
import Vue from 'vue';
import elFormItem from 'element-ui/lib/form-item';
import { getPropByPath } from 'element-ui/src/utils/util';
import { cloneDeep } from 'lodash';

function isObject(obj) {
  return obj !== null && typeof obj === 'object' && !Array.isArray(obj);
}

export default Vue.extend({
  extends: elFormItem,
  data() {
    return {
      internalInitialValue: null,
    };
  },
  mounted() {
    if (this.prop) {
      this.internalInitialValue = isObject(this.initialValue) ? cloneDeep(this.initialValue) : this.initialValue;
    }
  },
  methods: {
    // 重置resetField方法
    resetField() {
      this.validateState = '';
      this.validateMessage = '';

      let model = this.form.model;
      let value = this.fieldValue;
      let path = this.prop.replace(/:/, '.');

      let prop = getPropByPath(model, path, true);
      this.validateDisabled = true;

      if (Array.isArray(value)) {
        prop.o[prop.k] = [].concat(this.internalInitialValue);
      } else if (isObject(this.internalInitialValue)) {
        prop.o[prop.k] = cloneDeep(this.internalInitialValue);
      } else {
        prop.o[prop.k] = this.internalInitialValue;
      }

      this.$nextTick(() => {
        this.validateDisabled = false;
      });
    },
  },
});
</script>
相关推荐
非凡ghost3 小时前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost3 小时前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller3 小时前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
用户904706683573 小时前
commonjs的本质
前端
Zyx20073 小时前
用 JavaScript 打造 AI 大脑:前端开发者的新时代——基于 Brain.js 的浏览器端 NLP 实战
javascript·机器学习
Sailing3 小时前
5分钟搞定 DeepSeek API 配置:从配置到调用一步到位
前端·openai·ai编程
麦麦大数据4 小时前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药
Pa2sw0rd丶4 小时前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
麦麦大数据4 小时前
F037 vue+neo4j 编程语言知识图谱可视化分析系统vue+flask+neo4j
vue.js·flask·知识图谱·neo4j·可视化·编程语言知识图谱
非凡ghost4 小时前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端