Input回車導(dǎo)致頁(yè)面刷新的問(wèn)題

Element UI為了遵守W3C規(guī)范特意設(shè)置的魁亦，就是當(dāng)Form中只有一個(gè)Input的時(shí)候，F(xiàn)orm把這個(gè)事件當(dāng)成了是提交表單的操作邀摆，所以頁(yè)面會(huì)刷新纵顾。

解決方法：

凡是<el-form>里面只有一個(gè)Input，就在<el-form>上附加一個(gè)事件：@submit.native.prevent栋盹，這樣可以阻止默認(rèn)提交施逾，可以解決這個(gè)問(wèn)題。

Input的各種輸入約束辦法

可以使用這幾種約束方法：

1. 正則替換例获，比較粗暴汉额，慎用

一些場(chǎng)景下，比如編輯人員錄入一篇文章榨汤，早就規(guī)定了標(biāo)題不允許使用嘆號(hào)蠕搜，編輯也明白這個(gè)規(guī)定，他只是從別的地方復(fù)制標(biāo)題收壕，恰好標(biāo)題帶嘆號(hào)讥脐，那么，正則替換可以幫助編輯直接把嘆號(hào)去掉啼器。比如：

@input="form.title = form.title.replace(/[!旬渠！]/g,'')"

這就要比提示“標(biāo)題禁止出現(xiàn)嘆號(hào)”要好。

同樣的端壳，約束一個(gè)輸入框只允許輸入數(shù)字和小數(shù)點(diǎn)告丢，也可以用這種方法。

記姿鹎：

不要用這種方法去執(zhí)行超出常識(shí)的約束和有負(fù)面作用的約束岖免，因?yàn)椴灰?jiàn)得使用者會(huì)注意到程序的自動(dòng)替換，或許會(huì)造成使用者困擾甚至造成事故照捡。

2. 長(zhǎng)度約束颅湘，阻止輸入，也比較粗暴栗精，慎用

maxlength闯参、minlength這2個(gè)屬性可以用來(lái)約束字符長(zhǎng)度，可用于type="text"和type="textarea"悲立，但是對(duì)于別的type它一般無(wú)能為力鹿寨，比如改成type="number"就不起作用。

注意薪夕，minlength在Element UI中其實(shí)是無(wú)效的脚草，至少經(jīng)過(guò)我測(cè)試，
minlength + rules設(shè)為必填 + this.$refs["form"].validate()是無(wú)效的原献，無(wú)法報(bào)錯(cuò)馏慨。
minlength其實(shí)在原生Form中才會(huì)有效埂淮。

長(zhǎng)度控制可以設(shè)置比如某個(gè)網(wǎng)絡(luò)游戲昵稱（最多6位）……等。

事實(shí)上写隶，我maxlength并不建議用于控制手機(jī)號(hào)輸入倔撞，盡管國(guó)內(nèi)手機(jī)號(hào)一定是11位，但是用rules控制會(huì)更好一些樟澜，因?yàn)榭傆腥藷o(wú)意輸入了12個(gè)數(shù)字，你粗暴的阻止最后一位的輸入也可能會(huì)造成困擾叮盘。

真的想控制長(zhǎng)度秩贰，最佳實(shí)踐是使用rules，因?yàn)榭刂茢?shù)值長(zhǎng)度是不常見(jiàn)的約束柔吼，無(wú)論是用正則替換還是用阻止輸入毒费，都可能讓使用者困擾或者不留意，最終形成事故愈魏。

記酌俨！：

同樣的，不要用這種方法去執(zhí)行超出常識(shí)的約束和有負(fù)面作用的約束培漏，因?yàn)椴灰?jiàn)得使用者會(huì)注意到輸入被截?cái)嘞澹热缒阍O(shè)置maxlength="10"，一個(gè)使用者飛速地敲了11位字符牌柄，他根本沒(méi)注意最后一個(gè)字符是沒(méi)有成功輸入的畸悬，也會(huì)造成使用者困擾甚至造成事故。

max珊佣、min一般跟step聯(lián)合使用蹋宦，但是它不具有約束性，只要你愿意咒锻，你可以敲出高于max的數(shù)值冷冗，所以盡量別用max、min惑艇。

3. 最妥帖的辦法蒿辙，使用rules

官方文檔：https://element.eleme.cn/#/zh-CN/component/form

基于async-validator：https://github.com/yiminghe/async-validator

比如，手機(jī)號(hào)必須11位滨巴，寫法是：

      formRules: {
        ownerPhone: [
          { required: true, message: "手機(jī)號(hào)不能為空", trigger: "blur" },
          { len: 11, message: "手機(jī)號(hào)應(yīng)為11位", trigger: "blur" }
        ],
      }

一個(gè)輸入行须板，有多個(gè)輸入框，怎么分別驗(yàn)證兢卵，分別提示习瑰？

很簡(jiǎn)單，讓<el-form-item>里面繼續(xù)嵌套<el-form-item>即可秽荤，外層<el-form-item>只負(fù)責(zé)寫label甜奄，不寫prop柠横，內(nèi)層的<el-form-item>不寫label，寫prop课兄。

驗(yàn)證提示會(huì)顯示在每個(gè)內(nèi)層<el-form-item>的下方牍氛。

如何移除某個(gè)輸入框的驗(yàn)證結(jié)果？

比如有2個(gè)輸入框烟阐，前者如果是后者的2倍則通過(guò)搬俊。

現(xiàn)在我前面填寫了10，后面填寫6蜒茄，驗(yàn)證出錯(cuò)唉擂，這時(shí)候后者報(bào)紅字錯(cuò)誤。我發(fā)現(xiàn)是前者寫錯(cuò)了檀葛，改成了12玩祟，這樣符合了要求，但是后者的紅字錯(cuò)誤不會(huì)消失屿聋，怎么辦空扎？

只能手動(dòng)清除某個(gè)輸入框的報(bào)錯(cuò)，做法是：

1. 給<el-form-item>設(shè)ref润讥，值可以是字段名转锈。

2. 在validator末尾寫上this.$refs.xxx.clearValidate()即可。

明明寫的是數(shù)字楚殿，為什么type: 'number'驗(yàn)證不通過(guò)黑忱？

首先，給v-model加上.number勒魔。

然后甫煞，服務(wù)器返回的字段，必須轉(zhuǎn)換為數(shù)字再?gòu)?fù)制給form冠绢。

如何快捷生成表單的rules抚吠？

當(dāng)一個(gè)表單快寫完了，就該寫rules弟胀，但是這玩意寫起來(lái)很煩楷力，內(nèi)容大部分一樣，但是鍵名都各有區(qū)別孵户，比如：

      rules: {
        isOwner: [
          { required: true, message: "是否戶主不能為空", trigger: "blur" }
        ],
        phoneNumber: [
          { required: true, message: "聯(lián)系電話不能為空", trigger: "blur" },
          { len: 11, message: "手機(jī)號(hào)應(yīng)為11位", trigger: "blur" }
        ],
      },

大部分都是xxx不能為空這類話萧朝。有沒(méi)有快捷生成辦法？

我本來(lái)打算寫一個(gè)工具來(lái)專門生成夏哭，后來(lái)覺(jué)得沒(méi)必要检柬，因?yàn)闆](méi)辦法特別的智能，所以簡(jiǎn)單生成一下竖配，然后再做加工就好了何址。

方案：

1. 創(chuàng)建@/utils/genCode.js里逆，寫入：

module.exports = {
  rules: function (form) {
    let rules = {};
    for (let key in form) {
      if (Array.isArray(form[key])) {
        rules[key] = [{ required: true, message: "不能為空", trigger: "blur", type: 'array' }];
      } else {
        rules[key] = [{ required: true, message: "不能為空", trigger: "blur" }];
      }
    }
    console.log(JSON.stringify(rules, null, 2).replace(/"(.+?)":/g, '$1:').replace(/"/g, "'"));
  },
};

2. 在main.js寫入：

if (process.env.NODE_ENV === 'development') {
  Object.defineProperty(Vue.prototype, '$genCode', { value: require('@/utils/genCode') });
}

使用：

1. 在提交按鈕事件最頂部加上這2行代碼：

      this.$genCode.rules(this.form);
      return;

2. 在瀏覽器里把必填的字段都填上隨意字符，不必填的字段如果你不想設(shè)rule用爪，可以不填原押。

3. 點(diǎn)擊提交按鈕，會(huì)打印出來(lái)一片代碼偎血，將代碼貼到編輯器诸衔，然后進(jìn)一步修改即可。

4. 用完刪掉this.$genCode.rules(this.form);return;這2行就完事颇玷。

如何快捷生成表單的'data.form'笨农？

首先問(wèn)自己懶不懶，如果懶亚隙，可以直接給data.form賦值為{}磁餐，只要Form中沒(méi)有Checkbox-Group就行违崇，因?yàn)镃heckbox-Group初始化的時(shí)候就要讀取data.form中的屬性阿弃，而且必須是數(shù)組，所以{}這種空對(duì)象會(huì)報(bào)錯(cuò)羞延。Element UI剩下的所有組件都沒(méi)問(wèn)題渣淳，哪怕是級(jí)聯(lián)選擇器這種value一定是數(shù)組的組件，也不會(huì)報(bào)錯(cuò)伴箩。

如果你比較勤快入愧，希望代碼正規(guī)一點(diǎn)，可以模仿上一道題的方法嗤谚。

第一步棺蛛，看Form里有沒(méi)有Checkbox-Group，有的話將它的屬性先寫好巩步，比如現(xiàn)在是：

form: {
  xxcheckboxList: [],
}

第二步旁赊，創(chuàng)建@/utils/genCode.js，寫入：

module.exports = {
  form: function (form) {
    let data = {};
    for (let key in form) {
      if (Array.isArray(form[key])) {
        data[key] = [];
      } else if (typeof form[key] === 'string') {
        data[key] = '';
      } else if (typeof form[key] === 'boolean') {
        data[key] = form[key];
      }
    }
    console.log(JSON.stringify(data, null, 2).replace(/"(.+?)":/g, '$1:').replace(/"/g, "'"));
  },
};

第三步椅野，在main.js寫入代碼终畅，跟上題內(nèi)容一樣。

第四步竟闪，在提交按鈕事件最頂部加上這2行代碼：

      this.$genCode.rules(this.form);
      return;

第五步离福，必填不必填的字段一律填，然后點(diǎn)擊提交按鈕炼蛤，剩下的不說(shuō)了妖爷。用完別忘記注釋掉。

弄懂Form的resetFields方法原理理朋，并謹(jǐn)慎使用

resetFields方法原理

Form的resetFields方法的用法是this.$refs[refName].resetFields();赠涮，這個(gè)方法做的事就是將表單的某些數(shù)據(jù)（為什么說(shuō)是“某些”請(qǐng)繼續(xù)看）重置為初始值（即data加載的時(shí)候form的值）子寓，重置過(guò)程大致是：

1. 先找Form身上設(shè)置的model，也就是表單數(shù)據(jù)對(duì)象笋除，比如叫form斜友。

2. 再找Form里的各個(gè)<el-form-item>，看它身上的prop垃它，比如payName：

      <el-form-item label="XX設(shè)置" prop="payName">
        <el-input
          v-model="form.payName"
        />
      </el-form-item>

然后將payName對(duì)應(yīng)的form.payName設(shè)為data里的form初始化的時(shí)候的值鲜屏，初始化的時(shí)候沒(méi)有這個(gè)屬性的話，則重置為undefined或者[null]国拇。依次處理每個(gè)<el-form-item>洛史。如果某個(gè)<el-form-item>沒(méi)有prop，那么也不會(huì)有屬性被重置酱吝。

看到了嗎也殖？

1. 沒(méi)有被prop的屬性，resetFields就管不到务热，不會(huì)對(duì)其做任何操作忆嗜。

2. v-model="form.payName"跟resetFields完全沒(méi)關(guān)系！

如果不用resetFields還能用什么方案崎岂？

可以重置為空對(duì)象：this.form = {}捆毫；或者重置為this.form = {xx: []}這種帶屬性的對(duì)象。

兩種方案的對(duì)比如下：

可見(jiàn)：resetFields方案的顧慮多，重賦值方案的顧慮少（但不是沒(méi)有顧慮）江醇，只需要關(guān)注重賦值初始值即可濒憋，但假如初始值有屬性，卻無(wú)腦重賦值成了{}也會(huì)出事故陶夜。

慎用resetFields的場(chǎng)合

假設(shè)有個(gè)搜索查詢表單凛驮，初始值是：

      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

有一個(gè)選填的Select，我選擇了一個(gè)值律适，也就是form.a設(shè)為1辐烂，然后Select的change事件函數(shù)根據(jù)這個(gè)值計(jì)算出了另一個(gè)值form.b，比如是乘以100的關(guān)系捂贿，于是form.b得到100纠修，然后，我點(diǎn)擊了提交厂僧，服務(wù)器要的是form.b而不是form.a扣草，100被成功提交，到目前沒(méi)啥問(wèn)題。

接著辰妙，我點(diǎn)擊“重置”按鈕鹰祸，此時(shí)用resetFields來(lái)重置表單，其結(jié)果是：

• form.a被重置為undefined密浑，因?yàn)镾elect設(shè)置了prop="a"蛙婴。

• form.b沒(méi)任何變化，因?yàn)闆](méi)有哪個(gè)prop設(shè)置為b尔破，所以form.b此時(shí)還是100

現(xiàn)在街图，表面上看，表單都被重置懒构，Select的值也是空餐济，但是，form.b的值依然沒(méi)有變胆剧，是100絮姆。緊接著，重置按鈕進(jìn)行下一步操作秩霍，也就是根據(jù)queryParams重新請(qǐng)求數(shù)據(jù)篙悯，此時(shí)queryParams是這樣：

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        b: 100,
      },

到此，問(wèn)題出現(xiàn)：我本意是重置所有搜索條件前域，但是b并沒(méi)有被重置辕近，查詢結(jié)果也一定是錯(cuò)的韵吨。

解決方案：

其實(shí)這事解決起來(lái)很容易匿垄，我列出3種方案，你可以選擇一種你認(rèn)為最無(wú)腦归粉、最不容易出錯(cuò)的方案椿疗。

方案1：queryParams初始值加入b: null。

方案2：取消change事件監(jiān)聽(tīng)糠悼，改為submit的時(shí)候才計(jì)算所有的b届榄，但是要注意，不要給queryParams.b賦值倔喂，不然又成了無(wú)法resetFields铝条，應(yīng)該單設(shè)變量b，參數(shù)傳(...queryParams, b)席噩。

方案3：直接不用resetFields班缰，改為手動(dòng)重賦值為初始值。

我個(gè)人推薦方案1或方案3悼枢，理由是：

1. 方案1是只要哪個(gè)屬性沒(méi)在prop就一律寫到初始值埠忘，比較無(wú)腦，但可能會(huì)忘了寫。

2. 方案2將計(jì)算放到提交事件里莹妒，注意事項(xiàng)比較多名船，也要用到解構(gòu)賦值，也不利于封裝統(tǒng)一的提交函數(shù)旨怠。

3. 方案3手動(dòng)賦值渠驼，好處是初始值不用考慮b，重賦值也不用考慮b鉴腻，重賦值無(wú)腦保持跟初始值一樣即可渴邦。如果初始值是空對(duì)象，那就更好了拘哨，無(wú)腦重賦值為空對(duì)象就行了谋梭。

Select要給form的多個(gè)屬性賦值，如何寫代碼倦青？

我們用:value=""給Option指定輸出的value值瓮床，但如果想一次性給form的多個(gè)屬性賦值，該怎么辦呢产镐？比如又要傳遞userId隘庄，又要傳遞nickName，怎么辦呢癣亚？（這里我假設(shè)你已經(jīng)知道nickName有可能不會(huì)被重置的風(fēng)險(xiǎn)以及解決辦法丑掺。）可以這樣寫@change：

        <el-form-item label="人員" prop="userId">
          <el-select v-model="form.userId" placeholder="請(qǐng)選擇人員"
            clearable
            :style="{width: '100%'}"
            @change="form.nickName = personList.find(v=>$event===v.userId).nickName"
          >
            <el-option v-for="(item, index) in personList" :key="index"
              :label="item.nickName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>

其中$event指向Select的值，也就是form.userId述雾。

當(dāng)然街州，如果后端除了userId和nickName，還要其他值玻孟，那么我建議寫一個(gè)事件函數(shù)比較清晰唆缴。

Date-Picker或者Time-Picker加上is-range的話，值是數(shù)組黍翎，怎么拆成form的2個(gè)屬性面徽？

這要比上個(gè)問(wèn)題好解決，值是數(shù)組的話匣掸，可以在@change里直接解構(gòu)賦值趟紊，這樣就拆成了form的2個(gè)屬性。（這里我假設(shè)你已經(jīng)知道startTime碰酝、endTime有可能不會(huì)被重置的風(fēng)險(xiǎn)以及解決辦法霎匈。）

  <el-time-picker
    is-range
    v-model="form.range"
    range-separator="至"
    start-placeholder="開(kāi)始時(shí)間"
    end-placeholder="結(jié)束時(shí)間"
    placeholder="選擇時(shí)間范圍"
    @change="[form.startTime, form.endTime] = $event"
  >
  </el-time-picker>

有個(gè)小疑問(wèn)

那么，上一個(gè)問(wèn)題（《Select要給form的多個(gè)屬性賦值砰粹，如何寫代碼唧躲？》）造挽，為啥我們不把Select的值直接設(shè)為item，然后把item解構(gòu)呢弄痹？

因?yàn)橄旅孢@種寫法饭入，在編輯器里是報(bào)錯(cuò)的，原因是form.nickName不能是這種表達(dá)式肛真，必須只能是變量名谐丢。

    @change="{nickName: form.nickName} = $event" // 非法寫法

還有人會(huì)問(wèn)，寫成@change="form.nickName = $event.nickName"不就行了么蚓让？

確實(shí)乾忱，寫法是沒(méi)錯(cuò)，但是用法有悖論历极。

一窄瘟、value是item對(duì)象，意味著服務(wù)器可以收到這個(gè)對(duì)象趟卸，為什么還要拆分呢蹄葱？

二、如果說(shuō)锄列，后端不喜歡處理對(duì)象图云，就喜歡拆分傳送，那么邻邮，你不僅要寫form.nickName = $event.nickName竣况，你還要寫form.userId = $event.userId，等于要寫2行語(yǔ)句筒严，這種情況下就應(yīng)該專門定義方法了丹泉，并不省事，對(duì)不對(duì)萝风？

三嘀掸、當(dāng)你不是新建表單紫岩，而是編輯表單的時(shí)候规惰，你就要給Select的Option的value傳遞對(duì)象，以便Select能在UI上正確顯示當(dāng)前值泉蝌。這時(shí)候歇万，你就要找后端給你返這個(gè)現(xiàn)成的對(duì)象，或者自己拼出這個(gè)對(duì)象勋陪，不然贪磺，Select是不會(huì)顯示當(dāng)前值的。并不省事诅愚，對(duì)不對(duì)寒锚？

最后提醒一句，綁定對(duì)象類型的話，官方說(shuō)：

如果 Select 的綁定值為對(duì)象類型刹前，請(qǐng)務(wù)必指定 value-key 作為它的唯一性標(biāo)識(shí)泳赋。

動(dòng)態(tài)表單字段

所謂“動(dòng)態(tài)表單”，有2種解釋喇喉，一種是根據(jù)data動(dòng)態(tài)生成輸入框祖今，一種是在模板寫死代碼，用v-show來(lái)控制輸入框拣技。今天說(shuō)后一種千诬。

v-show來(lái)控制輸入框的前提下，提交的時(shí)候應(yīng)當(dāng)判斷到底提交哪些字段膏斤，有些字段就應(yīng)該不提交徐绑。比如：

let params;
if (['0','1','2'].includes(this.form.deptType)) { // 部門類型為0/1/2時(shí)
  const { lng, lat, ...rest } = this.form; // 忽略經(jīng)緯度
  params = rest;
} else if (this.form.deptType === '3') { // 部門類型為3時(shí)
  params = this.form; // 全要
} else if (this.form.deptType === '4') { // 部門類型為4時(shí)
  const { deptAddress, deptDesc, lng, lat, ...rest } = this.form; // 忽略地址、描述莫辨、經(jīng)緯度
  params = rest;
}
// 接下來(lái)提交params即可泵三。

動(dòng)態(tài)修改rules

比如，某些前提下a字段不必填衔掸，另一些前提下a字段必填烫幕，怎么辦？

1. rules要把字段寫全敞映，即使有些字段的required為false较曼。總之按照默認(rèn)狀態(tài)設(shè)置true或false振愿，但字段一定要寫進(jìn)去捷犹。

2. 在觸發(fā)動(dòng)態(tài)變化的事件里修改rules

@change="onChangeDeptType"

3. 凡是可能變化的字段都要加上。比如：

    onChangeDeptType(value) {
      if (['0','1','2'].includes(this.form.deptType)) {
        this.rules.lat[0].required = false;
        this.rules.lng[0].required = false;
        this.rules.deptAddress[0].required = true;
        this.rules.deptDesc[0].required = true;
      } else if (this.form.deptType === '3') {
        this.rules.lat[0].required = true;
        this.rules.lng[0].required = true;
        this.rules.deptAddress[0].required = true;
        this.rules.deptDesc[0].required = true;
      } else if (this.form.deptType === '4') {
        this.rules.lat[0].required = false;
        this.rules.lng[0].required = false;
        this.rules.deptAddress[0].required = false;
        this.rules.deptDesc[0].required = false;
      }
    }

Input的問(wèn)號(hào)注釋

我們?cè)趧e的UI框架中可能見(jiàn)過(guò)這樣的問(wèn)號(hào)注釋冕末，鼠標(biāo)懸停能彈出氣泡內(nèi)容：

image.png

但官方手冊(cè)并沒(méi)有介紹這種用法萍歉，只是說(shuō)，可以在Input里插入圖標(biāo)档桃。今天我就來(lái)變相實(shí)現(xiàn)輸入框的問(wèn)號(hào)注釋枪孩。

              <el-input v-model="form.nickName" placeholder="請(qǐng)輸入昵稱">
                <el-popover
                  slot="suffix"
                  placement="top"
                  title="標(biāo)題"
                  width="200"
                  trigger="hover"
                  content="這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容,這是一段內(nèi)容。">
                  <i slot="reference" class="el-icon-question color-000"></i>
                </el-popover>
              </el-input>

1. 官方手冊(cè)是插入了一個(gè)問(wèn)號(hào)Icon藻肄，但是今天我們不但是要插入Icon蔑舞，還要鼠標(biāo)懸停能彈出氣泡，所以我插入了一個(gè)Popover嘹屯。

2. Popover里面又插入了一個(gè)Icon攻询，是問(wèn)號(hào)圖標(biāo)。這樣就OK了州弟。

3. 如果覺(jué)得圖標(biāo)顏色不明顯钧栖，可以設(shè)個(gè)色值低零，比如color-000是我自定義的color: #000;，你可以隨意改拯杠。

最后是這樣子：

image.png

另外毁兆，你可能在有些網(wǎng)站看到的圖標(biāo)是嘆號(hào)，我認(rèn)為嘆號(hào)和問(wèn)號(hào)的區(qū)別在于：

• 當(dāng)用戶很大概率不知道怎么填內(nèi)容的時(shí)候阴挣，用問(wèn)號(hào)气堕。

• 當(dāng)用戶確定知道怎么填，只是想看更多的注釋的時(shí)候畔咧，甚至是起警告作用的時(shí)候茎芭，用嘆號(hào)。

如何避免發(fā)送form的臨時(shí)/私有屬性誓沸？

比如Input組件的值是form.a梅桩，由它計(jì)算出一個(gè)form.b是服務(wù)器需要的值，但是服務(wù)器不需要form.a拜隧，你的一個(gè)做法是把a(bǔ)和b都傳上去宿百，但是可能后端程序員會(huì)不高興，因?yàn)闊o(wú)用字段多了他會(huì)煩洪添，對(duì)前端程序員也不太好垦页，因?yàn)閰?shù)當(dāng)然是越少越好。

你可以使用剩余操作符來(lái)賦值：

      const {a, ...restParams} = this.form;
      postXXX(restParams).then(response => {
        // ...
      })

這樣的話干奢，form.a就被排除了痊焊，也不會(huì)被上傳了，并且不會(huì)影響form的數(shù)據(jù)忿峻。

但是薄啥，這并不是最佳實(shí)踐！最佳實(shí)踐是將臨時(shí)屬性加一個(gè)私有標(biāo)記逛尚，比如_a垄惧，也就是前置下劃線，發(fā)送的時(shí)候用axios的攔截器統(tǒng)一攔截绰寞，過(guò)濾掉它到逊。

所以上例Input組件的值改為form._a，而form.b不動(dòng)克握。

怎么過(guò)濾form._a蕾管，只上傳form.b？

在axios的請(qǐng)求攔截器里過(guò)濾菩暗，凡是屬性以_為首字符的，就不要發(fā)送旭蠕。

service.interceptors.request.use(
  config => {
    if (config.params && Object.keys(config.params).some(v => v[0] === '_')) {
      let newParams = {};
      for (let key in config.params) {
        if (key[0] !== '_') {
          newParams[key] = config.params[key];
        }
      }
      config.params = newParams;
    }
    if (config.data && Object.keys(config.data).some(v => v[0] === '_')) {
      let newData = {};
      for (let key in config.data) {
        if (key[0] !== '_') {
          newData[key] = config.data[key];
        }
      }
      config.data = newData;
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)