vue列表-编辑修改功能

实现方式

编辑功能通过点击列表中的编辑按钮，弹出一个模态框，供用户编辑选中的资源。

数据与方法

• showEditModal(record)：打开编辑模态框的方法，在方法中传入选中的资源数据。
• handleSuccess()：处理编辑成功后的回调方法。

示例代码

父组件：

<a type="primary" @click="showEditModal(record)"> <a-icon type="edit" /> 编辑 </a>

<script> 
import EditModal from "./modal/EditModal.vue"; 
export default { 
components: { EditModal }, 
data() { 
return { 
model: {}, 
selectItem: {}, 
editData: {}, 
dropDown: { 
dataSource: [], 
},

在列表的操作列中添加一个编辑按钮，当用户点击编辑按钮时，调用showEditModal()方法，并传入选中的资源数据。

编辑模态框组件：

<EditModal ref="EditModal" :rowData="editData" @success="handleSuccess"></EditModal>

子组件：

<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="rowData.resource_ip" /> 
</a-form-item> 
</a-col> 
<!-- ...省略其他表单项... --> 
</a-row> 
</a-form> 
</template> 
<script> 
import { save } from '@/api/***' 
export default { 
name: 'EditModal', 
props: ['rowData'], 
data() { 
return { 
id: '', 
model: {}, 
editedData: {}, 
dropDown: { 
dataSource: [], 
}, 
confirmLoading: false, 
form: this.$form.createForm(this),

methods: { 
doOK() { 
const that = this; 
this.form.validateFields((err, values) => { 
if (!err) { 
values.id = that.rowData.id; // 将编辑后的数据与被编辑的id数据进行替换 
values.resource_expire_date = values.resource_expire_date.format('YYYY-MM-DD'); 
save(values) // 调用接口进行保存 
.then(res => { 
if (res.success) { 
that.visible = false; 
this.$message.success("修改成功！"); 
this.$emit('success'); 
} else { 
} 
}) .catch(err => { 
}); 
} 
}); 
}, 
show(r) { 
this.selectItem = r; 
this.visible = true; 
this.form.setFieldsValue(r); 
r.id = r.id; 
this.model = Object.assign({}, r); 
this.$nextTick(() => { 
this.form.setFieldsValue( 
pick(
this.model, 
'id'，
'resource_name', 
<!--省略其它字段名--> 
) 
); 
}) 
},

在Vue组件中引入一个名为EditModal的编辑模态框组件，并通过ref属性给组件取一个引用，在rowData属性中传入需要编辑的资源数据，监听success事件以处理编辑成功后的回调。

使用方法

将以上示例代码添加到您的Vue组件中，根据实际需求适配编辑按钮的样式和位置。当用户点击编辑按钮时，会弹出一个编辑模态框，用户可在模态框中编辑选中的资源。编辑成功后，触发success事件，您可以在handleSuccess()方法中更新列表数据或进行其他操作。