vue3+element Plus实现在table中增加一条表单数据的示例代码

 更新时间:2024年01月19日 11:07:13   作者:清茶煮酒xin  
这篇文章主要介绍了vue3+element Plus实现在table中增加一条表单数据的操作,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

实现在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 方法来处理哦!
  });
}

当前情况呢 是适用于单条数据新增,并且直接操作数据库的

到此这篇关于vue3+element Plus实现在table中增加一条表单数据的文章就介绍到这了,更多相关vue3 element Plus增加表单数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 。这篇文章主要介绍了在Vue项目中使用WebUploader实现文件上传,需要的朋友可以参考下
    2019-07-07
  • Vue Echarts实现多功能图表绘制的示例详解

    Vue Echarts实现多功能图表绘制的示例详解

    作为前端人员,日常图表、报表、地图的接触可谓相当频繁,今天小编隆重退出前端框架之VUE结合百度echart实现中国地图+各种图表的展示与使用;作为“你值得拥有”专栏阶段性末篇,值得一看
    2023-02-02
  • vue中的锚点定位问题

    vue中的锚点定位问题

    这篇文章主要介绍了vue中的锚点定位问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue中获取this.$refs为undefined的问题

    Vue中获取this.$refs为undefined的问题

    这篇文章主要介绍了Vue中获取this.$refs为undefined的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue之使用mockjs生成模拟数据案例详解

    Vue之使用mockjs生成模拟数据案例详解

    这篇文章主要介绍了Vue之使用mockjs生成模拟数据案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Vue中import from的来源及省略后缀与加载文件夹问题

    Vue中import from的来源及省略后缀与加载文件夹问题

    这篇文章主要介绍了Vue中import from的来源--省略后缀与加载文件夹,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • VUE组件简明讲解

    VUE组件简明讲解

    组件是什么?组件是用基础的元素组成的复杂的、可以重复使用的代码单元,就相当于叠叠乐一样的快件,可以将这些复用的代码封装其起来构成的组件可需要的时候进行调用
    2022-08-08
  • vue-element-admin 登陆及目录权限控制的实现

    vue-element-admin 登陆及目录权限控制的实现

    本文主要介绍了vue-element-admin 登陆及目录权限控制的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue3+vite应用中添加sass预处理器问题

    vue3+vite应用中添加sass预处理器问题

    这篇文章主要介绍了vue3+vite应用中添加sass预处理器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • element实现二级菜单和顶部导航联动的示例

    element实现二级菜单和顶部导航联动的示例

    本文主要介绍了element实现二级菜单和顶部导航联动的示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论