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

原创

于 2021-07-03 11:48:56 发布 · 759 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elemrnt-ui

本文介绍如何使用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