vue el-table 添加行手动填写数据

最新推荐文章于 2024-08-07 17:21:28 发布

「已注销」

最新推荐文章于 2024-08-07 17:21:28 发布

阅读量672

点赞数

分类专栏： vue 文章标签： vue elemrnt-ui

本文链接：https://blog.csdn.net/bing_lemon/article/details/118437866

版权

本文介绍如何使用Vue和Element-UI库实现表格动态添加行的功能，允许用户在新行中手动输入数据。通过点击添加按钮，表格将增加一行空白记录，供用户填写信息。

摘要由CSDN通过智能技术生成

如图点击添加行就会出现table表中空白的一行让使用者自行填写

页面：

 <el-button type="primary" class="add-btn" @click="addDemo"
      >添加行</el-button
    >
    <el-table
      :data="tableData"
      size="mini"
      stripe
      highlight-current-row
      border
      style="width: 97.3%"
      class="el-tb-edit"
      :header-cell-style="{
        background: '#2a87ed',
        color: '#fff',
        fontSize: ' 1.2rem',
        fontWeight: 'normal',
        height: '2.88rem',
      }"
      ref="demoTable"
    >
      <!-- <el-table-column type="index" width="50">序号</el-table-column> -->
      <el-table-col