1. 在组件中引入a-
modal组件
```
import {
Modal } from 'ant-design-vue';
```
2. 在data中定义需要绑定的数据
```
data() {
return {
visible: false,
formData: {
name: '',
age: '',
gender: '',
},
}
},
```
3. 在template中使用a-
modal组件
```
<a-
modal
title="新增用户"
v-
model:visible="visible"
@ok="handleOk"
@cancel="handleCancel"
>
<a-form :
model="formData">
<a-form-item label="姓名">
<a-input v-
model:value="formData.name" />
</a-form-item>
<a-form-item label="年龄">
<a-input v-
model:value="formData.age" />
</a-form-item>
<a-form-item label="性别">
<a-radio-group v-
model:value="formData.gender">
<a-radio value="male">男</a-radio>
<a-radio value="female">女</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-
modal>
```
4. 定义方法
```
methods: {
handleOk() {
// 处理保存逻辑
this.visible = false;
},
handleCancel() {
// 取消新增
this.visible = false;
},
add() {
// 打开新增弹窗
this.visible = true;
},
},
```
完整代码示例：
```
<template>
<div>
<a-table :columns="columns" :data-source="dataSource">
<a slot="title">
<a-button type="primary" @click="add">新增</a-button>
</a>
</a-table>
<a-
modal
title="新增用户"
v-
model:visible="visible"
@ok="handleOk"
@cancel="handleCancel"
>
<a-form :
model="formData">
<a-form-item label="姓名">
<a-input v-
model:value="formData.name" />
</a-form-item>
<a-form-item label="年龄">
<a-input v-
model:value="formData.age" />
</a-form-item>
<a-form-item label="性别">
<a-radio-group v-
model:value="formData.gender">
<a-radio value="male">男</a-radio>
<a-radio value="female">女</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-
modal>
</div>
</template>
<script>
import {
Modal } from 'ant-design-vue';
export default {
name: 'UserList',
components: {
Modal,
},
data() {
return {
visible: false,
formData: {
name: '',
age: '',
gender: '',
},
columns: [
{
title: '姓名',
dataIndex: 'name',
},
{
title: '年龄',
dataIndex: 'age',
},
{
title: '性别',
dataIndex: 'gender',
},
],
dataSource: [
{
name: '张三',
age: 18,
gender: 'male',
},
{
name: '李四',
age: 20,
gender: 'female',
},
],
};
},
methods: {
handleOk() {
// 处理保存逻辑
this.dataSource.push(this.formData);
this.visible = false;
},
handleCancel() {
// 取消新增
this.visible = false;
},
add() {
// 打开新增弹窗
this.visible = true;
},
},
};
</script>
```
7192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
