html:
<el-button @click="copy(row)">复制</el-button>
<!-- 复制弹框 -->
<el-dialog :close-on-click-modal="false" title="复制" width="600px"
:visible.sync="copyVisible" append-to-body>
<el-form ref="formData" :model="formData" :rules="rules"
label-width="100px" v-loading="copyLoading">
<el-form-item label="活动名称: " prop="title">
<el-input v-model="formData.title" type="text" placeholder="请输入活动名称" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="copyTableData">提交</el-button>
</el-form-item>
</el-form>
</el-dialog>
js变量:
data () {
return {
// 复制弹框显示和隐藏
copyVisible: false,
// 复制loading
copyLoading: false,
// 表单数据
formData: {
id: "",
title: "",
},
rules: {
title: [ { required: true, message: '请输入活动名称', trigger: 'blur', } ]
}
}
},
js方法:
/**
* 复制弹框显示
*/
copy(row) {
Object.keys(this.formData).forEach(key => {
this.formData[key] = row[key];
});
this.copyVisible = true;
},
/**
* 复制数据
*/
copyTableData() {
this.$refs['formData'].validate(async valid => {
if (valid) {
this.$confirm("确定复制?", "提示", { type: "warning" })
.then(async () => {
this.copyLoading = true;
let params = { ...this.formData };
let res = await activityInfo.copy(params);
try {
if (res.code == 200) {
this.copyLoading = false;
this.copyVisible = false;
this.$message.success(`复制成功`);
this.listQuery.page = 1;
this.getList();
} else {
this.copyLoading = false;
this.$message.error(`复制失败`);
};
} catch (error) {
this.copyLoading = false;
};
});
} else {
return false;
};
});
}
效果图: