最初に el-form 要素をいくつか用意します。el-form:model (v-bind:model) では単一項目のバインディングです。v-model="" と記述すると、検証が無効であるように見える場合があります。
検証した結果がこれ
今すぐ使い始めましょう！
1. el-form で ref をバインドします。名前は独自に作成され、後続のトリガー検査結果に使用する必要があります。
2. 検証の内容を含むルールオブジェクトを準備します。
3. 検証が必要な要素には検証内容に応じたpropを追加する必要があります。(入力) などの双方向バインディングの場合、プロパティの名前はバインドされた要素の名前と同じである必要があることに注意してください。たとえば、コレクション データが SkuForm.skuName の場合、プロパティの値は次のようになります。 skuName、そうでない場合は、スタンドアップの検証に失敗する可能性があります
<el-form ref="SkuForm" label-width="100px" :rules="rules" :model="SkuForm">
<el-form-item label="SPU名称" prop="prop">
<span>{
{ spu.spuName }}</span>
</el-form-item>
<el-form-item label="SKU名称" prop="skuName">
<el-input placeholder="请输入SKU名称" v-model="SkuForm.skuName"></el-input>
</el-form-item>
<el-form-item label="价格（元）" prop="price">
<el-input placeholder="价格(元素)" v-model="SkuForm.price"></el-input>
</el-form-item>
<el-form-item label="重量（千克）" prop="weight">
<el-input placeholder="重量（千克）" v-model="SkuForm.weight"></el-input>
</el-form-item>
<el-form-item label="规格说明" prop="skuDesc">
<el-input type="textarea" rows="4" v-model="SkuForm.skuDesc"></el-input>
</el-form-item>
<el-form-item label="图片列表" prop="skuImageList">
<!-- :data="tableData" -->
<el-table style="width: 100%" border :data="skuImageList" @selection-change="changeSelect" ref="ImageTable"
:highlight-current-row="true">
<el-table-column type="selection" width="55" prop="prop">
</el-table-column>
<el-table-column label="图片" prop="prop">
<template slot-scope="{row,$index}">
<img :src="row.imgUrl" style="width:100px;height:100px" />
</template>
</el-table-column>
<el-table-column label="名称" prop="imgName">
</el-table-column>
<el-table-column label="操作" prop="caozuo">
<template slot-scope="{row,$index}">
<el-button type="primary" v-if="row.isDefault == 0" @click="changeDefault(row)">设置默认</el-button>
<el-button v-else>默认</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item>
<el-button type="primary" size="medium" @click="saveSku">保存</el-button>
<el-button size="medium" @click="Cancel">取消</el-button>
</el-form-item>
</el-form>保存されたデータ
data(){
//自定义校验--校验图片有没有选择 默认图片表示为1
var checkimageList = (rule, value, callback) => {
let result = false;
if(this.imageList) {
//如果没有默认图片，就返回true不放行。有默认图片就返回false放行
result = this.imageList.every(item => {
return item.isDefault != 1
})
}else{
//没有选择的情况也是不放行的
result = true
}
if (result) {
callback("还没有选择默认图片哦~")
}
callback()
}
return{
rules: {
// 如果是双向绑定的如（input）的prop的名字必须和绑定的元素一样
skuName: [
{ required: true, message: 'SkuName名称不能为空哦~', trigger: 'blur' },
],
price: [
{ required: true, message: '请输入价格~', trigger: 'blur' },
],
weight: [
{ required: true, message: '请输入重量~', trigger: 'blur' },
],
skuDesc: [
{ required: true, message: '请输入描述~', trigger: 'blur' },
],
// 检查图片是否有选择
skuImageList: [
{ required: true,validator: checkskuImageList , trigger: 'change' }
]
},
SkuForm: {
skuName: '',
spuId: 0,
weight: '',
price: '',
skuDesc: '',
},
//保存图片的
skuImageList: []
},
} this.$refs.SkuForm.validate((valida) => {
if (valida) {
//如果以上校验通过，则会返回true
//执行其他业务
}
})