vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-ui表单提交值清空

element-ui表单提交自动清空隐藏表单值实现

作者：不会打代码

这篇文章主要为大家介绍了element-ui表单提交自动清空隐藏表单值实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

需求的开始

一个表单，里面有很多表单项，然后需求通过特定的条件会触发某些表单项的显隐，条件会有很多很多，但是会有个问题，就例如：

所以，在a输入框隐藏状态，提交给后端的数据a输入框对应的值应该是空的才对，这么一看那我们的需求是不是就是：

但其实这样做并不好，让我们想想，就是例如一个开关，点一下控制10个表单项的显隐，用户好不容易填写了10个表单项，然后不小心点了一下开关把表单项给隐藏了，于是又重新点击开关把10个表单项给打开，但是却发现辛辛苦苦填写的10个表单项没有了，这谁受得了，所以我们的需求其实是这样的：

初步思路：标记方案

对应的我们的思路应该是这样：

有别的超简单的方案？

会有人觉得这个思路挺麻烦，那我只要提交的时候根据开关判断一下然后改变一下值不就好了吗，就例如：

let open = false; // 开关
let form = { // 表单的值
  name: '',
  age: '',
}；
if (open === true) {
  submit(form); // 如果开关是开的，那就正常提交目前的表单，是改了什么值就什么值
} else {
  form.name = ''; // 如果开关是关的，那我手写这个代码把变量恢复空就好了
  form.age = '';
  submit(form);
}

突然是不是觉得上面那段代码已经可以解决问题了，之前的都是废话？其实并不是，开头就标明了，表单项有很多，200个？300个？，你觉得你也可以手写，那ok，如果加上20种不同的条件判断呢？

这个时候你要写多少代码，而且这样复杂度很高，代码也很难阅读，所以我才会想用标记记录。ok，否了这个“简单”的方案后，我们继续讨论之前的思路。

继续标记方案

分析如何实现

const hideTag = []

{ prop: 'name' } => const = tag = [{ prop: 'name' } ];

然后我们来分析一下怎么实现：

这个时候我们可以通过本身的显隐逻辑代码的时候，去增加代码，去通知到也页面这个属性要显示还是隐藏，但是实际上也是会混入非常多的代码在显隐逻辑的代码片段，所以不是很好

那样我们能不能这样，给我们的组件一个方法，当组件销毁和创建的时候发出一个事件，然后我们页面捕获这个事件再去逻辑，这个就很好，就不需要添加很多代码，

只需要在表单项组件的生命周期添加两个方法即可，因为你的属性这些内容，表单组件都是需要的所以都我们需要的属性名和显隐状态都有了

然后还需要引入一个 bus事件总线 ，来作为发射事件的导体，因为我的页面组件比较多，曾经比较复杂，如果页面层级相对简单的也可以使用自组件自带的 emit事件

具体如何实现在表单项组件添加显隐逻辑事件

（在项目里面element-ui的el-form-item组件）

复制的时候需要注意，el-form-item里面还引入了一个组件label-warp，这个也要复制过来，或者你把引导的代码修改一下：

之前：

import LabelWrap from './label-wrap';

修改：

import LabelWrap from ‘element-ui/packages/form/src/label-warp’

不然引用会报错，复制组件过来或者你修改引用路径都行，反正要保证原来代码的引用都是正常的

（label-warp组件）

// 引入eventBus
import {bus} from '@/bus';
// mounted添加显示事件
mounted() {
    // 两个个参数：
    // 第一个字段属性：name，或者多层的结构 person.age, human.yellow.name
    // 第二个是显隐状态：true就是显式，false就是隐藏
    bus.$emit('destroy-val', this.prop, true);
}
// destory添加隐藏事件
destroyed() {
   // 参数和显示是一样含义
    bus.$emit('destroy-val', this.prop, false)
  },

import Vue form 'vue;
export var bus = new Vue();

import {bus} from '@/bus';
export default {
  data() {
    return {
      hideTag: [],
    }
  },
  method: {
    // 根据显隐改变hideTag数组
    changeHideTag() {
                           // prop 就是属性名：name, human.yellow.name 
                           // isCreate 就是显隐：true就是显示，false就是隐藏
    bus.$on("destroy-val", (prop, isCreate) => {
      if (isCreate) {
        // 这个是显示的情况，所以我们要过滤一下，把对应隐藏的属性名去掉
        // prop: 'name', hideTag: ['name'] => hideTag: []
        this.hideTag = this.hideTag.filter(propName => propName !== prop );
      } else {
        // 这个是隐藏的情况，我们需要添加进入标记数组
        // prop: 'name', hideTag: [] => hideTag: ['name']
        props.forEach(prop => {this.hideTag.push(prop)});
      }
    });
  },
  }
}

import {bus} from '@/bus';
export default {
  data() {
    return {
      hideTag: [],
      // 表单对象
      form: {
        name: '',
        human: {
          yellow: {
            name: ''
          }
        }
      }
    }
  },
  method: {
// 根据hideTag清除对应的属性
    clearHiddenBlockVal() {
// 这是根据映射去清除fields对应值
        this.hideTag.forEach(item => {
// name => [name], human.yellow.name => [human, yellow, name]
            let propsStr = item.split(".");
// 这里的reduce最后不返回东西，目的是去到对象最后一层清空
            propsStr.reduce((pre, next, index, arr) => {
// 这里判断，如果是循环到属性的最后一层，也就是例如 obj.name => [obj, name] => 到name就是最后了，那就吧对应值清空
                if (index === arr.length - 1) {
                    pre[next] = '';
                } else {
                    return pre[next];
                }
            }, this.form);
            });
        },
  }
}
// 如果不知道reduce是怎么用法，地址在这里
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

结尾

以上就是整个的解决思路和实现，具体实施的过程要根据自己的场景作出一些改变，

以上就是element-ui表单提交自动清空隐藏表单值实现的详细内容，更多关于element-ui表单提交值清空的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文