vue3+element Plus实现在table中增加一条表单数据_vue3+ts 点击添加table-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42766526/article/details/135652986

本文介绍了如何在Vue3项目中结合ElementPlus组件库，实现在表格中插入一行可编辑的表单数据，支持新增、保存和删除功能，并提供了对应的TS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现在table列表中，增加一行可单条数据保存的表单，使用vue3 + element Plus

1. 先上效果图

在这里插入图片描述

2. 代码实现

	<el-table v-loading="loading" :data="tableData" row-key="id">
      <el-table-column property="id" label="序号"></el-table-column>
      <el-table-column property="name" label="姓名">
        <template #default="scope">
          <el-input v-if="!scope.row.id" v-model="scope.row.name"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column property="number" label="年龄">
        <template #default="scope">
          <el-input v-if="!scope.row.id" v-model="scope.row.number"></el-input>
          <span v-else>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" v-if="!scope.row.id"  @click.stop="handleSave(scope.row)">保存</el-button>
          <el-button type="danger" size="small" v-if="scope.row.id" @click.stop="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-btn">
      <el-button type="success" @click="addLineData()">添加一行</el-button>
    </div>

ts 实现


/**添加一行数据 */
function addLineData() {
  const newData = {
    name: '',
    number: '',
  };
  tableData.value.push(newData);
}

/** */
function handleDelete() {
  ElMessageBox.confirm("确认删除该条数据?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    //调用自己的接口啦！
    // 当然啦，如果全都是自己增加的未提交的数据，可以使用splice 方法来处理哦！
  });
}