vue列表-新增功能

实现方式

在资源列表的顶部，点击"新增资源"按钮，弹出一个模态框，用于填写新增资源的信息。

组件

• ProductModal：新增资源的模态框组件。

数据与方法

• doNewProduct：新增按钮点击事件，弹出新增模态框显示。
• visible：控制新增资源模态框的显示与隐藏
• confirmLoading：控制确认按钮的加载状态。
• form：表单对象，用于表单验证和数据提交。
• handleInput()：处理IP地址输入框的输入事件，验证输入的IP地址格式是否正确。
• doOK()：触发表单验证，提交新增资源的表单数据，并关闭模态框。
• save()：保存接口。
• close()：关闭模态框。
• show()：展示新增资源模态框，并将表单数据重置为空。

示例代码

父组件按钮及点击事件：

<a-button type="primary" @click="doNewProduct" style="margin-bottom: 10px;margin-right:8px;"> 
<a-icon type="plus-circle" /> 
新增资源
</a-button>

<product-modal ref="productModal" @success="handleSuccess"></product-modal>

import ProductModal from "./modal/ProductModal.vue";

doNewProduct() { 
this.$refs.productModal.show({}); 
},

子组件：

<template> 
<a-modal 
:visible="visible" 
title="新增资源" 
okText="确定" 
cancelText="取消" 
:width="width" 
@ok="doOK" 
@cancel="visible = false" 
:maskClosable="false" 
:confirmLoading="confirmLoading"
> 
<a-form :form="form"> 
<a-row :md="12" :sm="24"> 
<a-col :span="12"> 
<a-form-item label="IP地址" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
<a-input v-decorator="['resource_ip', { rules: [{ required: true, }] }]" placeholder="请输入IP地址" v-model="inputValue" /> 
</a-form-item> 
</a-col> 
<!-- ...省略其他表单项... --> 
</a-row> 
</a-form> 
</a-modal> 
</template> 
<script> 
import { save } from '@/api/***' // 保存接口调用 
export default { 
name: 'ProductModal', 
data() { 
return { 
visible: false, 
confirmLoading: false, 
form: this.$form.createForm(this), // ...省略其他代码... 
} 
}, 
methods: { 
// ...省略其他方法... 
doOK() { 
const that = this; 
// 触发表单验证 
this.form.validateFields((err, values) => { 
if (!err) { 
that.confirmLoading = true; 
save(requestData).then(res => { //调用接口进行保存 
if (res.doOK) { 
that.visible = false; 
} else { 
that.$message.success("新增成功！"); 
this.$emit('success'); 
} 
}).finally(() => { 
that.confirmLoading = false; 
that.close(); 
}); 
} 
}); 
}, 
show() { 
this.visible = true; 
this.form.resetFields(); 
this.model = Object.assign({}, {}); 
this.$nextTick(() => { 
this.form.setFieldsValue(
pick(
this.model, 
'resource_ip', 
'字段名...'
)); 
}); 
}, 
}, 
}; 
</script>

在Vue组件中，将ProductModal组件引入并添加相应的页面代码，根据实际需求可自行完善新增资源功能的业务逻辑及表单验证规则。

使用方法

将以上示例代码添加到您的Vue组件的相应位置，点击“新增资源”按钮即可弹出新增资源的模态框，填写表单并保存后，会触发handleSuccess()方法进行刷新资源列表。