element-ui表單提交自動清空隱藏表單值如何實現

本篇內容主要講解“element-ui表單提交自動清空隱藏表單值如何實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“element-ui表單提交自動清空隱藏表單值如何實現”吧!

需求的開始

一個表單，里面有很多表單項，然后需求通過特定的條件會觸發某些表單項的顯隱，條件會有很多很多，但是會有個問題，就例如：

• a輸入框：顯示狀態，輸入了值5，對應的屬性值為5

• 通過了某個條件觸發了讓a輸入框隱藏

• a輸入框：隱藏狀態，對應的屬性值為5

• 這個時候提交表單，后端就接收到a輸入框的值，但是實際a輸入框這個時候是隱藏狀態，就是并不想接受到a輸入框的值

所以，在a輸入框隱藏狀態，提交給后端的數據a輸入框對應的值應該是空的才對，這么一看那我們的需求是不是就是：

• a輸入框隱藏時候就（v-if初始化組件）恢復對應的初始屬性

但其實這樣做并不好，讓我們想想，就是例如一個開關，點一下控制10個表單項的顯隱，用戶好不容易填寫了10個表單項，然后不小心點了一下開關把表單項給隱藏了，于是又重新點擊開關把10個表單項給打開，但是卻發現辛辛苦苦填寫的10個表單項沒有了，這誰受得了，所以我們的需求其實是這樣的：

• a輸入框隱藏時候不要恢復初始值，重新顯示還要可以看到剛剛填的值

• 表單隱藏的時候再去不要把輸入框修改值提交，要提交隱藏輸入框的初始值

初步思路：標記方案

對應的我們的思路應該是這樣：

• 我們需要一個標記，就是當我們隱藏輸入框時候，對應標記我這個屬性現在是隱藏值，如果顯示時候，再把對應的隱藏標記去掉

• 然后提交的時候，我們需要根據標記把是隱藏值的屬性給恢復初始值去提交

有別的超簡單的方案？

會有人覺得這個思路挺麻煩，那我只要提交的時候根據開關判斷一下然后改變一下值不就好了嗎，就例如：

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 = []

• 然后只要對應的表單項目隱藏，我們就給標記數組添加上標記，name就是form表單里面的表單項的屬性

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

• 如果對應的表單項顯示，那么我們就從標記數組把對應的屬性給移除

• 提交的時候，我們就從標記數組找對應的屬性，我們就把form表單對應的值給清空

然后我們來分析一下怎么實現：

• 第一點很容易實現，自己新建一個變量就行了

• 第二點第三點都是一個意思就是在表單項顯示隱藏的時候觸發一個事件，可以拿到屬性名和顯隱狀態，

這個時候我們可以通過本身的顯隱邏輯代碼的時候，去增加代碼，去通知到也頁面這個屬性要顯示還是隱藏，但是實際上也是會混入非常多的代碼在顯隱邏輯的代碼片段，所以不是很好

那樣我們能不能這樣，給我們的組件一個方法，當組件銷毀和創建的時候發出一個事件，然后我們頁面捕獲這個事件再去邏輯，這個就很好，就不需要添加很多代碼，

只需要在表單項組件的生命周期添加兩個方法即可，因為你的屬性這些內容，表單組件都是需要的所以都我們需要的屬性名和顯隱狀態都有了

然后還需要引入一個 bus事件總線 ，來作為發射事件的導體，因為我的頁面組件比較多，曾經比較復雜，如果頁面層級相對簡單的也可以使用自組件自帶的 emit事件

具體如何實現在表單項組件添加顯隱邏輯事件

• 我們用到的組件是element-ui的el-form-item組件，我們需要往里面添加兩個事件分別在創建和銷毀的時候觸發，因為用了v-if指令來做顯隱的效果，所以只要隱藏就會觸發銷毀的生命周期destroyed，顯示就會觸發創建完成dom元素的的生命周期mounted

• 但是我們怎么添加方法，你都說了是element-ui的組件，難道你要我改源碼？而且改源碼并不能直接去改你的安裝的element-ui的npm包，一般我們要是想改到源碼里面的代碼就需要根據源代碼，做了修改然后自己發布一個npm的包，然后重新引用來使用，這樣的流程就太麻煩了，其他同事都得重新安裝新的包

• 還有個跟簡單的方法，我們直接找到element-ui的el-form-item組件，我們直接新建一個組件oa-form-item然后復制el-form-item這個組件的代碼出來

（在項目里面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組件）

• 復制完成之后我們就要往他里面添加bus事件總線，以及兩段代碼，這樣我們就可以和el-form-item一樣使用該組件了，代碼如下：

// 引入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();

• 接著我們就要在主頁面接受事件的觸發然后添加移除hideTag數組的元素：

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表單提交自動清空隱藏表單值如何實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！