第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

element-ui中有關(guān)聯(lián)邏輯關(guān)系的表單校驗(yàn)

element-ui中有關(guān)聯(lián)邏輯關(guān)系的表單校驗(yàn)

BIG陽(yáng) 2019-03-26 11:14:38
具體的UI展示如下:數(shù)據(jù)格式為:data: [    { label: '順豐', value: '' },    { label: '韻達(dá)', value: '' },    { label: '圓通', value: '' },    // ...動(dòng)態(tài)數(shù)據(jù),可能還有更多]校驗(yàn)規(guī)則及顯示:必填校驗(yàn);否則標(biāo)紅對(duì)應(yīng)輸入框,并在對(duì)應(yīng)輸入框下顯示'請(qǐng)輸入單量比例'格式校驗(yàn);比例值必須是大于0的數(shù)字類型,否則標(biāo)紅對(duì)應(yīng)輸入框,在對(duì)應(yīng)的輸入框下顯示‘輸入值必須為正數(shù)’關(guān)聯(lián)交驗(yàn):各個(gè)單量比例之和必須為100,否則標(biāo)紅所有輸入框,并在所有輸入框下顯示'比例之和必須為100%'前兩個(gè)沒(méi)有關(guān)聯(lián)邏輯的校驗(yàn)element-ui中有提供,但是關(guān)聯(lián)關(guān)系的邏輯沒(méi)什么思路,勞煩大牛有方法的提供一下具體的思路(最好能貼出代碼),萬(wàn)分感謝!采用一樓的方式只能校驗(yàn)當(dāng)前項(xiàng)是否滿足,無(wú)法將前面填寫(xiě)的置為合法
查看完整描述

2 回答

?
翻翻過(guò)去那場(chǎng)雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊

折騰了這么久,終于弄出來(lái)了,主要問(wèn)題是:當(dāng)校驗(yàn)條件滿足時(shí),需要重新校驗(yàn)所有表單的合理性


 <el-form :model="ruleForm" ref="form">

  <div v-for="(item, index) in ruleForm.proportion" :key="index">

    <el-form-item class="left label"

      :label="`${item.label}:`"

      :rules="rule"

      :prop="'proportion.' + index + '.value'">

      <el-input v-model.number="item.value"></el-input>%

    </el-form-item>

  </div>

</el-form>

// created初始化

this.rule = [

  { required: true, message: '請(qǐng)輸入單量比例', trigger: 'blur' },

  { type: 'integer', min: 1, max: 100, message: '輸入值必須介于1至100', trigger: 'blur' },

  { validator: this.checkSum, trigger: 'blur' },

];


// methods方法

checkSum(rule, value, callback) {

  let sum = 0;

  this.items.forEach((item) => {

    sum += item.value;

  });

  if (sum !== 100) {

    this.isLegal = false;

    callback(new Error('比例之和必須為100%'));

  } else {

    this.isLegal = true;

    callback();

  }

},


// watch監(jiān)控

isLegal() {

  this.$refs.form.validate((validate) => {

    this.isLegal = validate;

  });

},


查看完整回答
1 反對(duì) 回復(fù) 2019-03-29
?
一只萌萌小番薯

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊

利用validator定義自己的驗(yàn)證規(guī)則,偽代碼如下。


    [

        { 規(guī)則1... },

        { 規(guī)則2... },

        {

            validator: function(rule, value, callback) {


                sum(this.data) === 100 ? callback() : callback(new Error("比例之和必須為100%"));

            },

            trigger: 'blur'

        }

    ]


查看完整回答
反對(duì) 回復(fù) 2019-03-29
  • 2 回答
  • 0 關(guān)注
  • 2794 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)