你提供的是一段基于 **
Vue +
Ant Design Vue** 的模态框代码，用于添加 QTime 规则。当前逻辑只能“单行添加”，但你的需求是：
> ✅ **支持用户连续点击 Add 按钮，逐条添加多行 QTime 配置，并在表格中实时显示。**
---
### ✅ 目标功能
- 用户填写
表单后点击 `Add` 按钮；
- 表单数据被加入下方的 `a
-table` 列表中；
- 可继续添加新行（不关闭弹窗）；
- 支持删除某一行；
- 点击 `OK` 才真正提交所有数据；
- 不点 `OK` 前可反复增删。
---
## ✅ 解决方案：实现「多行动态添加 QTime」
我们需要做以下几件事：
1
. 使用数组管理多个待添加的 QTime 项（`StepQtime`）；
2
. 给每一条记录一个唯一 `id`（可用时间戳或 UUID）；
3
. 实现 `AddGroupResultQtime()` 方法将当前
表单值推入列表；
4
. 修改表格绑定的数据源为响应式列表；
5
. 最终通过 `handleAddQtimeOk()` 提交全部数据。
---
### ✅ 完整实现代码（
Vue +
Ant Design Vue）
#### 🔧 1
. Template 部分（基本不变，仅增强逻辑）
```html
<a
-modal
:visible="addQtimeVisible"
title="Add Qtime"
@ok="handleAddQtimeOk"
@cancel="handleAddQtimeCancel"
:width="900"
>
<a
-form :form="form">
<a
-row :gutter="16">
<!
-- QTime Type
-->
<a
-col :span="4">
<a
-form
-item label="QTime Type">
<a
-select v
-model="currentQtime
.controlType" style="width: 100%">
<a
-select
-option value="Max Time">Max Time</a
-select
-option>
<a
-select
-option value="Min Time">Min Time</a
-select
-option>
</a
-select>
</a
-form
-item>
</a
-col>
<!
-- QTime Period
-->
<a
-col :span="4">
<a
-form
-item label="QTime Period">
<a
-input
-number v
-model="currentQtime
.intervalTime" placeholder="输入时间" style="width: 100%" />
</a
-form
-item>
</a
-col>
<!
-- From Seq
-->
<a
-col :span="4">
<a
-form
-item label="QTime From Seq">
<a
-select v
-model="currentQtime
.strStepSeq" style="width: 100%">
<a
-select
-option v
-for="item in groupStepSeqList" :key="item">{{ item }}</a
-select
-option>
</a
-select>
</a
-form
-item>
</a
-col>
<!
-- To Seq
-->
<a
-col :span="4">
<a
-form
-item label="QTime To Seq">
<a
-select v
-model="currentQtime
.endStepSeq" style="width: 100%">
<a
-select
-option v
-for="item in groupStepSeqList" :key="item">{{ item }}</a
-select
-option>
</a
-select>
</a
-form
-item>
</a
-col>
<!
-- Expire Action
-->
<a
-col :span="4">
<a
-form
-item label="QTime Expire Action">
<a
-select v
-model="currentQtime
.expireAction" style="width: 100%">
<a
-select
-option value="Hold Lot">Hold Lot</a
-select
-option>
<a
-select
-option value="Show Message">Show Message</a
-select
-option>
</a
-select>
</a
-form
-item>
</a
-col>
<!
-- Add Button
-->
<a
-col :span="1"></a
-col>
<a
-col :span="2">
<a
-form
-item label=" " :colon="false">
<a
-button type="primary" block @click="addCurrentQtime">Add</a
-button>
</a
-form
-item>
</a
-col>
</a
-row>
</a
-form>
<!
-- 显示已添加的 QTime 列表
-->
<a
-card style="margin
-top: 20px" title="Qtime Information">
<a
-table
:columns="stepQtimeColumns"
:data
-source="addedQtimes"
rowKey="id"
:locale="{ emptyText: '暂无数据' }"
size="small"
>
<template #action="{ record }">
<a
-popconfirm title="确定删除?" @confirm="deleteStepQtime(record
.id)">
<a>删除</a>
</a
-popconfirm>
</template>
</a
-table>
</a
-card>
</a
-modal>
```
---
#### 🧠 2
. Script 部分（关键逻辑）
```
js
export default {
data() {
return {
addQtimeVisible: false,
// 当前正在填写的单条 QTime
currentQtime: {
controlType: undefined,
intervalTime: null,
strStepSeq: undefined,
endStepSeq: undefined,
expireAction: undefined,
},
// 已添加的所有 QTime（最终提交的内容）
addedQtimes: [],
// 下拉选项
groupStepSeqList: ['01', '02', '03', '04'], // 示例数据，实际从 props 或 API 获取
// 表格列定义
stepQtimeColumns: [
{ title: 'QTime Type', dataIndex: 'controlType' },
{ title: 'Period (min)', dataIndex: 'intervalTime' },
{ title: 'From Step', dataIndex: 'strStepSeq' },
{ title: 'To Step', dataIndex: 'endStepSeq' },
{ title: 'Expire Action', dataIndex: 'expireAction' },
{ title: '操作', slots: { customRender: 'action' } }
],
};
},
methods: {
// 添加当前
表单项到列表
addCurrentQtime() {
const q = {
...this
.currentQtime };
// 校验必填字段
if (!q
.controlType || !q
.intervalTime || !q
.strStepSeq || !q
.endStepSeq || !q
.expireAction) {
this
.$message
.warning('请完整填写所有字段！');
return;
}
// 生成唯一 id（使用时间戳即可）
const id = Date
.now();
// 添加进列表
this
.addedQtimes
.push({ id,
...q });
// 清空当前输入（可选）
this
.currentQtime = {
controlType: undefined,
intervalTime: null,
strStepSeq: undefined,
endStepSeq: undefined,
expireAction: undefined,
};
this
.$message
.success('已添加一行');
},
// 删除某一行
deleteStepQtime(id) {
this
.addedQtimes = this
.addedQtimes
.filter(item => item
.id !== id);
},
// 点击 OK 按钮时触发（最终确认）
handleAddQtimeOk() {
if (this
.addedQtimes
.length === 0) {
this
.$message
.info('未添加任何 QTime 规则');
this
.addQtimeVisible = false;
return;
}
// 将 addedQtimes 返回给父
组件处理（例如 emit 或
Vuex）
this
.$emit('onQtimeAdded', this
.addedQtimes); // 自定义事件
this
.addQtimeVisible = false;
},
// 取消整个模态框
handleAddQtimeCancel() {
this
.addQtimeVisible = false;
},
// 外部调用：打开模态框
openModal() {
this
.addQtimeVisible = true;
this
.addedQtimes = []; // 每次打开清空历史
}
}
};
```
---
### ✅ 关键点说明
| 功能 | 实现方式 |
|
------|
----------|
| 多次 Add | 把每次输入保存到 `addedQtimes` 数组中 |
| 唯一标识 | 每个对象加 `id: Date
.now()` 避免 key 冲突 |
| 清空输入 | 添加成功后重置 `currentQtime` |
| 删除功能 | 通过 `id` 过滤数组 |
| 提交全部 | `handleAddQtimeOk` 发送整个 `addedQtimes` 列表 |
| 不影响原数据 | 弹窗期间不修改主数据，直到点击 OK |
---
### ✅ 最终效果
✅ 用户可以：
- 填写 → 点 Add → 清空 → 再填 → 再 Add → …
- 表格中看到已添加的每一行；
- 删除任意错误添加项；
- 最终点击 “OK” 提交所有内容；
- 点 “Cancel” 放弃所有更改。
---
### ✅ 扩展建议
1
. **防止重复添加相同规则？**
```
js
const exists = this
.addedQtimes
.some(q =>
q
.strStepSeq === q
.strStepSeq &&
q
.endStepSeq === q
.endStepSeq &&
q
.controlType === q
.controlType
);
if (exists) {
this
.$message
.warning('该规则已存在');
return;
}
```
2
. **允许编辑已有行？**
- 在表格里增加 “编辑” 按钮；
- 点击后把该行数据回填到
表单。
3
. **持久化存储？**
- 将 `addedQtimes` 存入
Vuex / Pinia；
- 或通过 API 提交到后端。
---
###
本文介绍了Ant Design Vue中的s-table组件，该组件在使用上简化了分页处理，只需后端返回相应参数即可。查询功能通过设置queryParam与columns对应字段匹配实现，排序功能通过传递sortField和sortOrder参数给后端进行数据排序。此外，文章还展示了s-table的查询、排序和分页配置示例代码。
扫一扫
1049
到【灌水乐园】发言
