element plus多行table填报

### Element Plus 中实现多行表格填报功能

在构建复杂的Web应用时，表单是不可或缺的一部分。对于涉及大量数据输入的应用场景，使用多行表格进行数据录入能够显著提升用户体验和效率。

#### 创建基础表格结构

首先，在`<template>`标签内定义基本的表格布局：

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
        <!-- 可编辑单元格 -->
        <template slot-scope="scope">
            <el-input v-if="editingIndex === scope.$index"
                      size="mini"
                      placeholder="请输入内容"
                      v-model="scope.row.address"></el-input>
            <span v-else>{{ scope.row.address }}</span>
        </template>
    </el-table-column>
</el-table>

此代码片段展示了如何设置一个简单的表格，并为特定列中的某些项添加了可编辑字段[^2]。

#### 添加交互逻辑

为了让用户能够在不离开页面的情况下修改记录，还需要引入一些JavaScript逻辑来控制哪些行处于编辑模式下：

export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-03', name: 'Tom', address: 'No.189, Grove St, USA' },
        // 更多初始数据...
      ],
      editingIndex: null,
    };
  },
  methods: {
    editRow(index) {
      this.editingIndex = index;
    },
    saveEdit(row) {
      console.log('保存:', row);
      this.editingIndex = null; // 关闭当前编辑状态
    }
  }
};

上述方法允许点击某一行进入编辑模式，并通过调用`saveEdit()`函数完成更改并退出编辑模式。

#### 完善UI设计

最后一步是在界面上增加按钮以便于触发编辑动作及确认更新操作：

<!-- 编辑按钮放置在每一行的最后一列 -->
<el-button type="text" @click="editRow(scope.$index)">编辑</el-button>

<!-- 如果正在编辑，则显示保存按钮 -->
<div v-show="editingIndex !== null && editingIndex === scope.$index">
  <el-button type="primary" @click="saveEdit(scope.row)">保存</el-button>
</div>

这样就完成了基于Element Plus框架下的一个多行表格填报系统的简易版本。