vue页面表格下面加一行

### 动态添加新行至表格底部 为了实现在 Vue 页面中的表格下方动态添加一行的功能，可以采用 `el-form` 和 `el-table` 组件组合的方式。此方案不仅支持基本的数据展示还允许用户交互操作，比如增加新的记录项。 #### 创建可编辑表格结构 构建一个基础的 HTML 结构用于承载表单与表格元素，并确保每一列都对应着特定的信息字段，如序号、名称等[^1]： ```html <template> <div class="form-container"> <el-button type="primary" @click="addRow">新增</el-button> <el-table :data="tableData" style="width: 100%"> <!-- 序号 --> <el-table-column prop="index" label="序号"></el-table-column> <!-- 名称 --> <el-table-column prop="name" label="名称"></el-table-column> <!-- 图片上传 --> <el-table-column label="图片"> <template slot-scope="scope"> <el-upload action="/upload" list-type="picture-card" :file-list="scope.row.imageList" :on-preview="handlePictureCardPreview" :on-remove="(file, fileList) => handleRemove(file, fileList, scope.$index)"> <i class="el-icon-plus"></i> </el-upload> </template> </el-table-column> <!-- 视频上传 --> <el-table-column label="视频"> <template slot-scope="scope"> <el-upload action="/uploadVideo" :before-upload="beforeUploadVideo" :on-success="(response, file, fileList) => handleSuccess(scope.$index)" :show-file-list="false"> <video v-if="scope.row.videoUrl !== '' && !scope.row.showVideoUploadBtn" :src="scope.row.videoUrl" controls width="100%"/> <button v-else type="button">{{ scope.row.showVideoUploadBtn ? '点击上传' : '无文件' }}</button> </el-upload> </template> </el-table-column> <!-- 备注 --> <el-table-column prop="remark" label="备注"></el-table-column> </el-table> </div> </template> ``` #### 定义 JavaScript 方法逻辑 在脚本部分定义必要的变量以及事件处理器来管理表格的行为，特别是当触发 "新增" 按钮时应执行的操作——即向现有数据集中追加一条空白的新纪录： ```javascript <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { tableData: [ // 初始化一些默认值... ], maxRowsAllowed: 6, }; }, methods: { addRow() { if (this.tableData.length >= this.maxRowsAllowed) { alert('已达到最大行数'); return; } const newRow = { index: this.tableData.length + 1, name: '', imageList: [], videoUrl: '', showVideoUploadBtn: true, remark: '' }; this.tableData.push(newRow); }, submitForm(formName:string){ // 表单验证和提交逻辑... } // ...其他方法省略... } }); </script> ``` 上述代码片段展示了如何利用 Vue 的响应式特性轻松地往表格内插入额外的一行而无需刷新整个视图。每当调用 `addRow()` 函数就会依据设定条件判断当前是否还能继续添加更多行；如果满足，则会构造一个新的对象实例并将其附加到已有数组末尾，从而实现即时更新显示效果。