elementUI的表单重置功能
使用element官网的重置功能
注意事项：
1、重置要看 < el-form-item > 的组件元素上是否指定了字段名 prop=""。指定了才会重置生效*
<el-form-item prop="cardNum">
2、data中的属性要绑定每一个 prop指定的属性，如下所示
data() {
return {
list: [],
total: 110, //显示总的记录数，
currentPage: 1, //当前的页码
pageSize: 10, //每页显示10条数据
// searchMap要明确的指定属性，不然输入和刷新都有问题
searchMap: {
cardNum: "",
name: "",
payType: "",
birthday: ""
},
payTypeOption
};
},
searchMap这个数组接收上面所有的属性，
searchMap: {
cardNum: "",
name: "",
payType: "",
birthday: ""
},
3、每一个输入框都要进行属性v-model双向绑定，不然不能输入值，下面就是elementUI的会员卡号输入框
<el-form-item prop="cardNum">
<el-input v-model="searchMap.cardNum" placeholder="会员卡号"></el-input>
</el-form-item>
4、点击重置按钮刷新页面
<el-button @click="resetForm('searchFrom')">重置</el-button>
传入的searchFrom是当初表单 < el-form > 里面的ref绑定的值
<el-form
:inline="true"
ref="searchFrom"
:model="searchMap"
class="demo-form-inline"
style="margin-top:20px"
>
在method下面对整个表单进行重置
//这个是element提供的对整个表单进行重置
resetForm(formName) {
// 重置要看 <el-form-item>的组件元素上是否指定了字段名。指定了才会重置生效
this.$refs[formName].resetFields();
},
member的添加功能
1、去element的官网查找需要的组件
2、将组件添加并配置
一、弹出框表头配置
< el-dialog title="新增会员" :visible.sync="dialogFormVisible" width="500px">
title表示弹出框名字，
:visible.sync=双向绑定下面data的属性，dialogFormVisible为false则不弹出，为true则弹出
width="500px"表示弹出框的整体的宽度
二、表头的配置
<el-form
:rules="rules"
ref="pojoFrom"
label-width="100px"
label-position="right"
style="width:400px"
:model="pojo"
>
1、 < el-form >中的
:rules="rules"绑定规则属性与下面的 < el-form-item > prop="cardNum"绑定结合使用
2、 ref="pojoFrom"这个是表单的关键标签选项，验证是否传入空参数的时候就需要传入
3、 label-width=“100px” label-position=“right” 表示前面的引言宽度，和靠右排着
4、 style="width:400px"整个输入框的宽度
三、防止空表单提交配置
prop="cardNum"绑定必填选项，autocomplete="off"缓存上次填入内容
<el-form-item label="会员卡号" prop="cardNum">
<el-input v-model="pojo.cardNum" autocomplete="off"></el-input>
</el-form-item>
addData(formName)验证是否提交的参数不为空
this.$refs[formName].validate(valid => {})
通过上面的函数判断，如果不为空，valid为true
对Easy Mock的接口做处理，
post请求，请求地址/member
{
"code": 2000,
"flag": true,
"message": "新增成功",
}
在member.js中请求的方法如下
add(pojo) {
return request({
url: `/member`,
method: 'post',
data:pojo
})
}
memberApI.add(this.pojo).then(response => {
const resp = response.data;
// 如果返回的数据为true，则返回刷新数据，
if (resp.flag) {
// 重新查找刷新数据
this.fetchaData();
// 关闭窗口
this.dialogFormVisible = false;
} else {
this.$message({
message: resp.message,
type: "warning"
});
}
添加会员的方法整体如下 addData
addData(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
console.log("valid为true");
// 如果页面通过则提交方法
memberApI.add(this.pojo).then(response => {
const resp = response.data;
// 如果返回的数据为true，则返回刷新数据，
if (resp.flag) {
// 重新查找刷新数据
this.fetchaData();
// 关闭窗口
this.dialogFormVisible = false;
} else {
this.$message({
message: resp.message,
type: "warning"
});
}
});
} else {
console.log("valid为false");
}
});
}
表单提交后清空表单数据
1，修改添加方法
将以前的dialogFormVisible = true，改成一个方法
<el-button type="primary" @click="headleAdd">新增</el-button>
方法内容
headleAdd() {
// this.
this.dialogFormVisible = true;
// resetFields对整个表单进行重置，将所有的字段值重置为初始值，并移除效验结果
this.$nextTick(() => {
// this.$nextTick(()是一个异步事件，
// 弹出框打开后需要加载dom
// 弹出框打开需要加载dom,我们在弹出框打开之后完成
this.$refs["pojoFrom"].resetFields();
});
}
注意 this.$nextTick(() =>{})这个是异步加载的方法，等前面的弹出框的dom元素加载完成后，再加载这个里面内容
this.$refs["pojoFrom"].resetFields();
中的pojoFrom是表单中ref=""绑定的内容
2、每单个表单绑定prod属性，不然不能重置
例如：
<el-form-item label="会员地址" prop="address">
<el-input type="textarea" v-model="pojo.address"></el-input>
</el-form-item>
全部的表单如下
<el-dialog title="新增会员" :visible.sync="dialogFormVisible" width="500px">
<!-- label-width="100px"
lbbel-position="right" 这两个定义的是前面会员卡号这种的宽度位置-->
<el-form
:rules="rules"
ref="pojoFrom"
label-width="100px"
lbbel-position="right"
style="width:400px"
:model="pojo"
>
<el-form-item label="会员卡号" prop="cardNum">
<el-input v-model="pojo.cardNum"></el-input>
</el-form-item>
<el-form-item label="会员姓名" prop="name">
<el-input v-model="pojo.name"></el-input>
</el-form-item>
<el-form-item label="会员生日" prop="birthday">
<el-date-picker
value-format="yyyy-MM-dd"
v-model="pojo.birthday"
type="date"
placeholder="选择日期"
></el-date-picker>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<!-- autocomplete="off"浏览器自动识别并把值填充在这边 -->
<el-input v-model="pojo.phone" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="开卡金额" prop="price">
<el-input v-model="pojo.price"></el-input>
</el-form-item>
<el-form-item label="可用积分" prop="integral">
<el-input v-model="pojo.integral"></el-input>
</el-form-item>
<el-form-item label="支付类型" prop="payType">
<el-select v-model="pojo.payType" placeholder="支付类型">
<!-- 使用循环的方式 -->
<el-option v-for="em in payTypeOption" :key="em.type" :label="em.name" :value="em.type"></el-option>
</el-select>
</el-form-item>
<el-form-item label="会员地址" prop="address">
<el-input type="textarea" v-model="pojo.address"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addData('pojoFrom')">确 定</el-button>
</div>
</el-dialog>
3、表单的prod与表头里面的:model="pojo"相呼应，data里面的pojo相绑定
pojo: {
cardNum: "",
name: "",
payType: "",
birthday: "",
integral: 0,
phone:"",
price:"",
address:"",
}, //提交的数据对象，双向绑定
四、编辑用户
1、通过id查询用户信息，模态框展示出来，get请求
2、通过id修改用户信息，post请求
遇到问题
vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "model". Expected Object, got Array
found in
---> <ElForm> at packages/form/src/form.vue
<ElDialog> at packages/dialog/src/component.vue
<Anonymous>
<AppMain> at src/components/Appmain/index.vue
<Layout> at src/components/Layout.vue
<App> at src/App.vue
<Root>
错误的原因是
期望返回的对象，得到的是数组
从后台获取的数据是List类型，需要把它改为Object
获取数据的代码为
this.update = response.data;
修改成
this.update = response.data[0];
1、通过ID查询用户并展示到模态框
接口:/member/{id}
请求方式：get
easy mock 的接口编写如下
{
"code": 2000,
"flag": true,
"message": "查询成功",
"data": [{
"id": 10,
"cardNum": "@integer(10000)", //大于1000的正整数
"name": "@cname",
"birthday": "@date",
"phone|11": "@integer(0,9)", // 11个数字0-9间的数字
"integral": "@integer(0, 500)",
// "price": "@integer(0, 500)",
"money": "@float(0, 1000, 1, 3)", // 0-1000小数,1-3位小数位
"payType|1": ['1', '2', '3', '4'], // 4选 其1
"address": "@county(true)"
}]
}
请求的接口如下
// 通过id查询数据
getById(id) {
return request({
url: `/member/${id}`,
method: 'get'
})
},
2、通过ID编辑并修改用户
更新的接口如下
接口:/member/{id}
请求方式：put
JS中的接口如下所示：
// 更新数据
update(pojo){
return request({
url:`/member/${pojo.id}`,
method:'put',
data:pojo,
})
},
在data字段属性中的pojo数组中添加一个id并赋值为null
pojo: {
id: null,
cardNum: "",
name: "",
payType: "",
birthday: "",
integral: 0,
phone: "",
price: "",
address: ""
}, //提交的数据对象，双向绑定
因为使用的是一个模态框，并且使用的是一个提交按钮，所以使用比目运算符做判断
当pojo.id ==null为true触发addData(‘pojoFrom’)，并绑定 ref='pojoFrom’绑定的参数
<el-button type="primary"
@click="pojo.id ==null ?addData('pojoFrom'):updataData('pojoFrom')" >确 定</el-button>
当pojo.id ==null为false则触发updataData方法
this.$refs[forName].validate(valid=>{})这个是防止空表单提交
memberApI.update(this.pojo).then（传入pojo参数）
// 修改的接口
updataData(forName) {
// this.$refs[forName].validate这个是效验表单是不是为空
this.$refs[forName].validate(valid => {
if (valid) {
memberApI.update(this.pojo).then(response => {
const resp = response.data;
if (resp.flag) {
// 刷新页面，更新窗口
this.fetchaData();
// 关闭弹出窗口
this.dialogFormVisible = false;
}
else{
this.$message({
message:resp.message,
type:'warning'
})
}
});
}
});
},
7422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
