element-ui表單提交自動清空隱藏表單值如何實現(xiàn)

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

需求的開始

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

• a輸入框：顯示狀態(tài)，輸入了值5，對應(yīng)的屬性值為5

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

• a輸入框：隱藏狀態(tài)，對應(yīng)的屬性值為5

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

所以，在a輸入框隱藏狀態(tài)，提交給后端的數(shù)據(jù)a輸入框?qū)?yīng)的值應(yīng)該是空的才對，這么一看那我們的需求是不是就是：

• a輸入框隱藏時候就（v-if初始化組件）恢復(fù)對應(yīng)的初始屬性

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

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

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

初步思路：標(biāo)記方案

對應(yīng)的我們的思路應(yīng)該是這樣：

• 我們需要一個標(biāo)記，就是當(dāng)我們隱藏輸入框時候，對應(yīng)標(biāo)記我這個屬性現(xiàn)在是隱藏值，如果顯示時候，再把對應(yīng)的隱藏標(biāo)記去掉

• 然后提交的時候，我們需要根據(jù)標(biāo)記把是隱藏值的屬性給恢復(fù)初始值去提交

有別的超簡單的方案？

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

let open = false; // 開關(guān)
let form = { // 表單的值
  name: '',
  age: '',
}；
if (open === true) {
  submit(form); // 如果開關(guān)是開的，那就正常提交目前的表單，是改了什么值就什么值
} else {
  form.name = ''; // 如果開關(guān)是關(guān)的，那我手寫這個代碼把變量恢復(fù)空就好了
  form.age = '';
  submit(form);
}

突然是不是覺得上面那段代碼已經(jīng)可以解決問題了，之前的都是廢話？其實并不是，開頭就標(biāo)明了，表單項有很多，200個？300個？，你覺得你也可以手寫，那ok，如果加上20種不同的條件判斷呢？

這個時候你要寫多少代碼，而且這樣復(fù)雜度很高，代碼也很難閱讀，所以我才會想用標(biāo)記記錄。ok，否了這個“簡單”的方案后，我們繼續(xù)討論之前的思路。

繼續(xù)標(biāo)記方案

分析如何實現(xiàn)

• 讓我們設(shè)置一個標(biāo)記數(shù)組用來保存隱藏的，例如

const hideTag = []

• 然后只要對應(yīng)的表單項目隱藏，我們就給標(biāo)記數(shù)組添加上標(biāo)記，name就是form表單里面的表單項的屬性

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

• 如果對應(yīng)的表單項顯示，那么我們就從標(biāo)記數(shù)組把對應(yīng)的屬性給移除

• 提交的時候，我們就從標(biāo)記數(shù)組找對應(yīng)的屬性，我們就把form表單對應(yīng)的值給清空

然后我們來分析一下怎么實現(xiàn)：

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

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

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

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

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

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

具體如何實現(xiàn)在表單項組件添加顯隱邏輯事件

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

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

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

（在項目里面element-ui的el-form-item組件）

復(fù)制的時候需要注意，el-form-item里面還引入了一個組件label-warp，這個也要復(fù)制過來，或者你把引導(dǎo)的代碼修改一下：

之前：

import LabelWrap from './label-wrap';

修改：

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

不然引用會報錯，復(fù)制組件過來或者你修改引用路徑都行，反正要保證原來代碼的引用都是正常的

（label-warp組件）

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

// 引入eventBus
import {bus} from '@/bus';
// mounted添加顯示事件
mounted() {
    // 兩個個參數(shù)：
    // 第一個字段屬性：name，或者多層的結(jié)構(gòu) person.age, human.yellow.name
    // 第二個是顯隱狀態(tài)：true就是顯式，false就是隱藏
    bus.$emit('destroy-val', this.prop, true);
}
// destory添加隱藏事件
destroyed() {
   // 參數(shù)和顯示是一樣含義
    bus.$emit('destroy-val', this.prop, false)
  },

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

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

import {bus} from '@/bus';
export default {
  data() {
    return {
      hideTag: [],
    }
  },
  method: {
    // 根據(jù)顯隱改變hideTag數(shù)組
    changeHideTag() {
                           // prop 就是屬性名：name, human.yellow.name 
                           // isCreate 就是顯隱：true就是顯示，false就是隱藏
    bus.$on("destroy-val", (prop, isCreate) => {
      if (isCreate) {
        // 這個是顯示的情況，所以我們要過濾一下，把對應(yīng)隱藏的屬性名去掉
        // prop: 'name', hideTag: ['name'] => hideTag: []
        this.hideTag = this.hideTag.filter(propName => propName !== prop );
      } else {
        // 這個是隱藏的情況，我們需要添加進(jìn)入標(biāo)記數(shù)組
        // prop: 'name', hideTag: [] => hideTag: ['name']
        props.forEach(prop => {this.hideTag.push(prop)});
      }
    });
  },
  }
}

• 完成的標(biāo)記數(shù)組的存儲之后，就是最后一步，提交的時候根據(jù)標(biāo)記數(shù)組的屬性名，把對應(yīng)的屬性清空：

import {bus} from '@/bus';
export default {
  data() {
    return {
      hideTag: [],
      // 表單對象
      form: {
        name: '',
        human: {
          yellow: {
            name: ''
          }
        }
      }
    }
  },
  method: {
// 根據(jù)hideTag清除對應(yīng)的屬性
    clearHiddenBlockVal() {
// 這是根據(jù)映射去清除fields對應(yīng)值
        this.hideTag.forEach(item => {
// name => [name], human.yellow.name => [human, yellow, name]
            let propsStr = item.split(".");
// 這里的reduce最后不返回東西，目的是去到對象最后一層清空
            propsStr.reduce((pre, next, index, arr) => {
// 這里判斷，如果是循環(huán)到屬性的最后一層，也就是例如 obj.name => [obj, name] => 到name就是最后了，那就吧對應(yīng)值清空
                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表單提交自動清空隱藏表單值如何實現(xiàn)”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！