<CustomForm :show.sync="showForm" title="编辑" :control="formControl" :model="formField" :rules="formRules" @ok="saveForm" @hidden="hidForm" /> formField: { id:'', memberNo:'', memberName:'', phone:'', memberMoney:'', credits:'', residueNum:'', historicalMoney:'', level:'', status:'', birthDate:'', merchantName:'', openDate:'', openEmployeeName:'', bindWx:'', attendWx:'',changeMoney:'',type:''},怎么给custom form中加入一个日期选择器,使日期选择器得出来的值赋值给birthdate
时间: 2023-12-31 15:04:10 浏览: 159
你可以在CustomForm中使用Element-UI提供的DatePicker组件来实现日期选择器。以下是一个示例代码,可以在CustomForm中添加一个带有日期选择器的输入框:
```html
<template>
<div>
<custom-form :show.sync="showForm" title="编辑" :control="formControl" :model="formField" :rules="formRules" @ok="saveForm" @hidden="hidForm">
<el-form-item label="生日" prop="birthDate">
<el-date-picker v-model="formField.birthDate" type="date" placeholder="请选择日期"></el-date-picker>
</el-form-item>
</custom-form>
</div>
</template>
<script>
export default {
data () {
return {
formField: {
id:'',
memberNo:'',
memberName:'',
phone:'',
memberMoney:'',
credits:'',
residueNum:'',
historicalMoney:'',
level:'',
status:'',
birthDate:'',
merchantName:'',
openDate:'',
openEmployeeName:'',
bindWx:'',
attendWx:'',
changeMoney:'',
type:''
},
formControl: [
{type: 'text', prop: 'memberNo', label: '会员编号', disabled: true},
{type: 'text', prop: 'memberName', label: '会员姓名', disabled: true},
{type: 'text', prop: 'phone', label: '手机号码', disabled: true},
{type: 'text', prop: 'memberMoney', label: '余额', disabled: true},
{type: 'text', prop: 'credits', label: '积分', disabled: true},
{type: 'text', prop: 'residueNum', label: '剩余次数', disabled: true},
{type: 'text', prop: 'historicalMoney', label: '历史充值金额', disabled: true},
{type: 'text', prop: 'level', label: '会员等级', disabled: true},
{type: 'text', prop: 'status', label: '状态', disabled: true},
{type: 'text', prop: 'merchantName', label: '商家名称', disabled: true},
{type: 'text', prop: 'openDate', label: '开卡时间', disabled: true},
{type: 'text', prop: 'openEmployeeName', label: '开卡员工', disabled: true},
{type: 'text', prop: 'bindWx', label: '绑定微信号', disabled: true},
{type: 'text', prop: 'attendWx', label: '关注微信号', disabled: true},
{type: 'text', prop: 'changeMoney', label: '变动金额', disabled: true},
{type: 'text', prop: 'type', label: '充值类型', disabled: true}
],
formRules: {
birthDate: [{required: true, message: '请选择生日', trigger: 'blur'}]
},
showForm: false
}
},
methods: {
saveForm () {
// 保存表单数据
console.log(this.formField.birthDate)
},
hidForm () {
// 隐藏表单
}
}
}
</script>
```
在上面的代码中,我们在CustomForm中添加了一个日期选择器输入框,使用了Element-UI提供的DatePicker组件,它的v-model绑定到`formField.birthDate`。当用户选择日期时,`formField.birthDate`的值会自动更新。在保存表单数据时,可以通过`this.formField.birthDate`获取日期选择器选中的值,然后将其赋值给`birthdate`属性。
阅读全文