我模板上是这样写的
<el-form ref="ruleForm" :model="goods" label-width="80px" :rules="rules">
<el-tabs @tab-click="tabChange" :before-leave="beforeLeave" v-model="activeName" tab-position="left">
<el-tab-pane name='0' label="基本信息">
<el-form-item label="商品名称" prop="goods_name">
<el-input style="width: 850px;" v-model="goods.goods_name"></el-input>
</el-form-item>
<el-form-item label="商品价格" prop="goods_price">
<el-input style="width: 850px;" v-model="goods.goods_price"></el-input>
</el-form-item>
<el-form-item label="商品重量" prop="goods_weight">
<el-input style="width: 850px;" v-model="goods.goods_weight"></el-input>
</el-form-item>
<el-form-item label="商品数量" prop="goods_number">
<el-input style="width: 850px;" v-model="goods.goods_number"></el-input>
</el-form-item>
<el-form-item label="商品分类" prop="goods_cat">
<el-cascader
v-model="cat"
:options="categories"
:props="{ expandTrigger: 'hover' }"
clearable></el-cascader>
</el-form-item>
</el-tab-pane>
</el-tabs>
</el-form>
后边还有几个表单元素我不做校验,就没写
然后数据和rules我感觉也没问题啊
data(){
return {
goods: {
goods_name: '',
goods_price: '',
goods_number: '',
goods_weight: '',
goods_cat: '',
goods_introduce: '',
pics: [],
attrs: []
},
rules: {
goods_name: [{require: true, message: '请输入商品名称', trigger: 'blur'}],
goods_price: [{require: true, message: '请输入商品价格', trigger: 'blur'}],
goods_number: [{require: true, message: '请输入商品数量', trigger: 'blur'}],
goods_weight: [{require: true, message: '请输入商品重量', trigger: 'blur'}],
goods_cat: [{require: true, message: '请选择商品分类', trigger: 'blur'}]
}
}
}
但是rules就是不生效,输入框失焦之后啥提示也没有,整个页面见不到一点红😂实在不知道哪出问题了
看下是不是tabs影响的,activeName赋个默认值