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

最新推荐文章于 2025-01-15 14:01:24 发布

「已注销」

最新推荐文章于 2025-01-15 14:01:24 发布

阅读量759

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Bing_lemon/article/details/118437866

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

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

如图点击添加行就会出现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-column prop="riskSourceName" label="主要危险源" width="130">
        <template slot-scope="scope">
          <div>
            <el-input