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>
相关推荐
东风西巷2 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·电脑·音视频·软件需求
超级大只老咪3 小时前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友5 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
这里是杨杨吖6 小时前
SpringBoot+Vue医院预约挂号系统 附带详细运行指导视频
vue.js·spring boot·医院·预约挂号
深蓝电商API6 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx6 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶7 小时前
webpack学习
前端·学习·webpack
excel7 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年7 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js