需求的開始

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

• a輸入框：顯示狀態(tài)，輸入了值5，對(duì)應(yīng)的屬性值為5
• 通過了某個(gè)條件觸發(fā)了讓a輸入框隱藏
• a輸入框：隱藏狀態(tài)，對(duì)應(yīng)的屬性值為5
• 這個(gè)時(shí)候提交表單，后端就接收到a輸入框的值，但是實(shí)際a輸入框這個(gè)時(shí)候是隱藏狀態(tài)，就是并不想接受到a輸入框的值

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

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

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

• a輸入框隱藏時(shí)候不要恢復(fù)初始值，重新顯示還要可以看到剛剛填的值
• 表單隱藏的時(shí)候再去不要把輸入框修改值提交，要提交隱藏輸入框的初始值

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

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

• 我們需要一個(gè)標(biāo)記，就是當(dāng)我們隱藏輸入框時(shí)候，對(duì)應(yīng)標(biāo)記我這個(gè)屬性現(xiàn)在是隱藏值，如果顯示時(shí)候，再把對(duì)應(yīng)的隱藏標(biāo)記去掉
• 然后提交的時(shí)候，我們需要根據(jù)標(biāo)記把是隱藏值的屬性給恢復(fù)初始值去提交

有別的超簡單的方案？

會(huì)有人覺得這個(gè)思路挺麻煩，那我只要提交的時(shí)候根據(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)的，那我手寫這個(gè)代碼把變量恢復(fù)空就好了
  form.age = '';
  submit(form);
}

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

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

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

分析如何實(shí)現(xiàn)

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

const hideTag = []

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

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

• 如果對(duì)應(yīng)的表單項(xiàng)顯示，那么我們就從標(biāo)記數(shù)組把對(duì)應(yīng)的屬性給移除
• 提交的時(shí)候，我們就從標(biāo)記數(shù)組找對(duì)應(yīng)的屬性，我們就把form表單對(duì)應(yīng)的值給清空

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

• 第一點(diǎn)很容易實(shí)現(xiàn)，自己新建一個(gè)變量就行了
• 第二點(diǎn)第三點(diǎn)都是一個(gè)意思就是在表單項(xiàng)顯示隱藏的時(shí)候觸發(fā)一個(gè)事件，可以拿到屬性名和顯隱狀態(tài)，

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

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

只需要在表單項(xiàng)組件的生命周期添加兩個(gè)方法即可，因?yàn)槟愕膶傩赃@些內(nèi)容，表單組件都是需要的所以都我們需要的屬性名和顯隱狀態(tài)都有了

然后還需要引入一個(gè) bus事件總線 ，來作為發(fā)射事件的導(dǎo)體，因?yàn)槲业捻撁娼M件比較多，曾經(jīng)比較復(fù)雜，如果頁面層級(jí)相對(duì)簡單的也可以使用自組件自帶的 emit事件

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

• 我們用到的組件是element-ui的el-form-item組件，我們需要往里面添加兩個(gè)事件分別在創(chuàng)建和銷毀的時(shí)候觸發(fā)，因?yàn)橛昧藇-if指令來做顯隱的效果，所以只要隱藏就會(huì)觸發(fā)銷毀的生命周期destroyed，顯示就會(huì)觸發(fā)創(chuàng)建完成dom元素的的生命周期mounted
• 但是我們?cè)趺刺砑臃椒ǎ愣颊f了是element-ui的組件，難道你要我改源碼？而且改源碼并不能直接去改你的安裝的element-ui的npm包，一般我們要是想改到源碼里面的代碼就需要根據(jù)源代碼，做了修改然后自己發(fā)布一個(gè)npm的包，然后重新引用來使用，這樣的流程就太麻煩了，其他同事都得重新安裝新的包
• 還有個(gè)跟簡單的方法，我們直接找到element-ui的el-form-item組件，我們直接新建一個(gè)組件oa-form-item然后復(fù)制el-form-item這個(gè)組件的代碼出來

（在項(xiàng)目里面element-ui的el-form-item組件）

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

之前：

import LabelWrap from './label-wrap';

修改：

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

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

（label-warp組件）

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

// 引入eventBus
import {bus} from '@/bus';
// mounted添加顯示事件
mounted() {
    // 兩個(gè)個(gè)參數(shù)：
    // 第一個(gè)字段屬性：name，或者多層的結(jié)構(gòu) person.age, human.yellow.name
    // 第二個(gè)是顯隱狀態(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) {
        // 這個(gè)是顯示的情況，所以我們要過濾一下，把對(duì)應(yīng)隱藏的屬性名去掉
        // prop: 'name', hideTag: ['name'] => hideTag: []
        this.hideTag = this.hideTag.filter(propName => propName !== prop );
      } else {
        // 這個(gè)是隱藏的情況，我們需要添加進(jìn)入標(biāo)記數(shù)組
        // prop: 'name', hideTag: [] => hideTag: ['name']
        props.forEach(prop => {this.hideTag.push(prop)});
      }
    });
  },
  }
}

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

import {bus} from '@/bus';
export default {
  data() {
    return {
      hideTag: [],
      // 表單對(duì)象
      form: {
        name: '',
        human: {
          yellow: {
            name: ''
          }
        }
      }
    }
  },
  method: {
// 根據(jù)hideTag清除對(duì)應(yīng)的屬性
    clearHiddenBlockVal() {
// 這是根據(jù)映射去清除fields對(duì)應(yīng)值
        this.hideTag.forEach(item => {
// name => [name], human.yellow.name => [human, yellow, name]
            let propsStr = item.split(".");
// 這里的reduce最后不返回東西，目的是去到對(duì)象最后一層清空
            propsStr.reduce((pre, next, index, arr) => {
// 這里判斷，如果是循環(huán)到屬性的最后一層，也就是例如 obj.name => [obj, name] => 到name就是最后了，那就吧對(duì)應(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

結(jié)尾

以上就是整個(gè)的解決思路和實(shí)現(xiàn)，具體實(shí)施的過程要根據(jù)自己的場(chǎng)景作出一些改變，

• 比如有些表單項(xiàng)他是綁定兩個(gè)屬性名稱的，那么我們可以在在復(fù)制出來的oa-form-item自定義多一個(gè)屬性，props傳進(jìn)去數(shù)組屬性，相應(yīng)的函數(shù)也要做些許改變。
• 還有這里我們表單其實(shí)初始值基本都是空值，如果是有初始值的可以搞個(gè)初始值對(duì)象來對(duì)比

以上就是element-ui表單提交自動(dòng)清空隱藏表單值實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于element-ui表單提交值清空的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論