chenjianou / blog

我的个人博客
0 stars 0 forks source link

Table组件规则校验问题,以及Form动态校验 (ELEMENT, IVIEWUI) #31

Open chenjianou opened 3 years ago

chenjianou commented 3 years ago
<-- 动态校验 -->
<Form ref="formDynmic" :model="{ landPageTableItemInputList: item.landPageTableItemInputList }">
          <div class="tab-header__menu">
            <FormItem class="tab-item_btn" v-for="(row, index) in item.landPageTableItemInputList" :key="row"
            :prop="'landPageTableItemInputList.' + index + '.tabName'"
            :rules="[{ required: true, message: 'tab名称不能为空' }, { pattern:/^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '只能输入中文,数字,英文', trigger: 'blur'}]">
              <Icon class="icon-close" type="ios-close" @click="handlerTabItemDelete(row, index)" />
              <Input maxlength="8" v-model="row.tabName" placeholder="tab"/>
            </FormItem>
          </div>
        </Form>
chenjianou commented 3 years ago

<--Table组件 -->
<FormItem prop={`sku`} rules={  { required:  this.editIndex === index, message: 'sku不能为空' }}>
                {
                  this.editIndex === index && !row.id ? <Select transfer filterable clearable  onOn-clear={() => {
                    this.rowEdit.sku = '';
                    console.log('clear')
                    this.rowEdit.pdId = '';
                    this.rowEdit.pdName = '';
                  }} value={this.rowEdit.sku} onOn-change={ (sku) => {
                    if(sku) {
                      this.rowEdit.sku = sku;
                      this.rowEdit.pdId = this.skuMap.get(sku).pdId;
                      this.rowEdit.pdName = this.spuMap.get(this.skuMap.get(sku).pdId).pdName;
                    }
                   }}>
                    {this.getAllSku.filter(item => item.pdName === this.rowEdit.pdName).length ? this.getAllSku.filter(item => item.pdName === this.rowEdit.pdName).map( (item) => {
                      return <Option disabled={ this.data.find(row => row.sku === item.sku ) } value={ `${item.sku}` } label={ `${item.sku}/${item.weight}` }></Option>
                    }) : this.getAllSku.map( (item) => {
                      return <Option disabled={ this.data.find(row => row.sku === item.sku ) } value={ `${item.sku}` } label={ `${item.sku}/${item.weight}` }></Option>
                    })
                    }
                  </Select>: row.sku
                }
              </FormItem>