**
Ant Design of Vue遇到的问题合集
**
①弹窗关闭,数据回显问题
问题描述:新增某条数据的时候点击新增打开弹窗,填入数据之后没有保存并且关闭弹窗,再次打开弹窗上次的数据还显示在弹窗内 现在我要它不显示
<a-modal
title="新增在住人员"
:visible="addResident"
:bodyStyle="{ maxHeight: '650px', overflowY: 'auto' }"
:destroyOnClose="true"
@cancel="handleCancel"
:afterClose="() => $refs.ruleForm.resetFields()"
</a-model>
:afterClose="() => $refs.ruleForm.resetFields()"是弹窗关闭触发的时间事件,点击关闭弹窗表单表单数据重置
②Ant Design of Vue表单验证问题
表单采用FormModel(支持v-model的),form表单是不支持v-model的
问题描述:对象里面的对象的属性添加验证例如
params:{
form:{
name:'',
age:''
}
}
现在给name和age添加rules验证
‘form.name':[{required:true,message:'请输入姓名’}],
‘form.age':[{required:true,message:'请输入年龄’}]
就是在其两边添加双引号或者单引号即可(看你项目怎么配置的)
③给Tabel加上pagination
<a-table
:columns="columns"
:dataSource="data"
:pagination="pagination"
@change="changeTable"
class="tableStyle"
bordered
>
</a-table>
数据部分
search_params: any = {
page:1, //当前页数
per_page:10 //默认每页数据条数
}
pagination: any = {
total: 0,
per_page: 10,
size: 'default',
pageSizeOptions: ['2', '5', '10', '15', '20', '100'], //分页大小设置
showQuickJumper: true, //快速跳转
page: 1,
showSizeChanger: true, //是否可以改变pageSize
// showTotal: (total: number, range: any) =>
// `显示第${range[0]}-${range[1]} 条记录,总共 ${total} 条记录`,
showTotal: (total: number, range: any) => `共 ${total} 条`,
}
分页方法
changeTable(page: any) {
this.pagination.page = page.page
this.pagination.per_page = page.per_page
this.search_params.page = page.page
this.search_params.per_page = page.per_page
}
④表单数据重置
问题描述:当某个表单有重置操作的时候,点击重置,表单数据清空
reset(){
this.$refs…ruleForm.resetFields()
}
resetFields是表单的重置事件,但是有个前提条件 就是它只会重置带了prop属性的例如
⑤动态的placeholder
<a-input
:placeholder="`请输入${text}`"
v-model="search_params.name"
style="width:456px"
/>