一、表单验证
1、From
表单当中 <el-form style="width:80%" :model="tmForm" :rules="rules">
<el-form ref="ruleForm" style="width:80%" :model="tmForm" :rules="rules">
<el-form-item label="品牌名称" label-width="100px" prop="tmName">
<el-input v-model="tmForm.tmName" autocomplete="off" />
</el-form-item>
<el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
<!-- 不能用v-model收集,因为不是表单元素
on-success上传成功执行 :before-upload上传之前执行 -->
<el-upload
class="avatar-uploader"
action="/dev-api/admin/product/fileUpload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
在data中添加
// 表单验证规则
rules: {
// 品牌名称的验证规则
tmName: [
{ required: true, message: '请输入品牌名称', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }
],
// logo的验证规则
region: [
{ required: true, message: '请选择品牌的图片' }
]
}
ref="ruleForm" 绑定
rules:表单验证规则
prop:需要校验的字段
trigger:用户行为设置 blue:失焦 change:文本发生改变
调整AddOrUpdateTradeMark
addOrUpdateTradeMark() {
// 当全部验证字段通过,再书写业务逻辑
this.$refs.ruleForm.validate(async(success) => {
if (success) {
this.dialogFormVisible = false
const result = await this.$API.trademark.reqAddOrUpdateTradeMark(this.tmForm)
if (result.code === 200) {
this.$message({
type: 'success',
message: this.tmForm.id ? '修改产品成功' : '添加产品成功'
})
// 添加、修改产品成功以后,需要再次获取品牌列表进行展示
// 添加新品留在当前页
this.getPageList(this.tmForm.id ? this.page : 1)
}
} else {
console.log('error submit!!')
return false
}
})
},
2、删除
绑定 @click="deleteTradeMark(row)"
添加模板并修改提示
deleteTradeMark(row) {
// console.log(row)
// 弹框
this.$confirm(`确定删除${row.tmName}?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
收集输入的属性值———:model="attrInfo" 和v-model="attrInfo.attrName",attrInfo中的attrName数据。
<div v-show="!isShowTable">
<el-form ref="form" :inline="true" label-width="80px" :model="attrInfo">
<el-form-item label="属性名">
<el-input v-model="attrInfo.attrName" placeholder="请输入属性名" />
</el-form-item>
</el-form>
<el-button type="primary" icon="el-icon-plus">添加属性值</el-button>
<el-button @click="isShowTable=true">取消</el-button>
<el-table border style="width: 100%;margin: 20px 0px;">
<el-table-column type="index" label="序号" width="80" align="center" />
<el-table-column prop="prop" label="属性值名称" width="width" />
<el-table-column prop="" label="操作" width="width" />
</el-table>
<el-button type="primary">保存</el-button>
<el-button @click="isShowTable=true">取消</el-button>
</div>
有数组有对象————深拷贝
只有一种————浅拷贝
点击外面,回车,输入框取消
<template slot-scope="{row}">
<!-- span和input来回切换 -->
<el-input
v-if="flag"
v-model="row.valueName"
placeholder="请输入属性名称"
size="mini"
@blur="flag=false"
@keyup.native.enter="flag=false"
/>
<span v-else @click="flag=true">{{ row.valueName }}</span>
</template>
每一次都加一个TRUE
// 添加属性值回调
addAttrValue() {
this.attrInfo.attrValueList.push({
attrId: this.attrInfo.id,
valueName: '',
flag: true
})
},