【前端】vue采用el-table 添加行手动填写数据和删除行及提交_前端点击按钮增加一行表格

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

methods

---

实现效果

代码

      <el-dialog :title="titleDataDictionary" :visible.sync="openDataDictionary" width="1300px" append-to-body>
        <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 prop="index" label="序号" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.index"></el-input>
              <!--              <span>{{ scope.row.index }}</span>  显示在输入框的下面-->
            </template>
          </el-table-column>

          <el-table-column prop="assetNo" label="资产编号" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.assetNo"></el-input>
            </template>
          </el-table-column>

          <!-- <el-table-column type="index" width="50">序号</el-table-column> -->
          <el-table-column prop="riskSourceName" label="表中文名" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.riskSourceName"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="riskPointName" label="表英文名" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.riskPointName"></el-input>
              <!--              <span>{{ scope.row.riskPointName }}</span>-->
            </template>
          </el-table-column>
          <el-table-column prop="riskLevel" label="字段中文名" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.riskLevel"></el-input>
              <!--              <span>{{ scope.row.riskLevel }}</span>-->
            </template>
          </el-table-column>
          <el-table-column prop="hiddenDanger" label="字段类型" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.hiddenDanger"></el-input>
              <!--              <span>{{ scope.row.hiddenDanger }}</span>-->
            </template>
          </el-table-column>
          <el-table-column prop="type" label="字段长度" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.type"></el-input>
              <!--              <span>{{ scope.row.type }}</span>-->
            </template>
          </el-table-column>
          <el-table-column prop="accident" label="取值范围" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.accident"></el-input>
              <!--              <span>{{ scope.row.accident }}</span>-->
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark"></el-input>
              <!--              <span>{{ scope.row.remark }}</span>-->
            </template>
          </el-table-column>
          <el-table-column prop="accident" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDeleteDataDictionary(scope.$index,tableData)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" class="add-btn" @click="handleDataDictionaryAssetInfo">提交</el-button>
      </el-dialog>

data

      data(){
        return{


### 最后

**一个好的心态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**分享一些前端面试题以及学习路线给大家**

![](https://img-blog.csdnimg.cn/img_convert/4b6ef43a8a6fe86102b360e3638363ec.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/c4a0ddf0e274e7b13ec4c6c993877e5b.webp?x-oss-process=image/format,png)

s.csdn.net/topics/618166371)**

**分享一些前端面试题以及学习路线给大家**

[外链图片转存中...(img-JXfQveAF-1715218517576)]

[外链图片转存中...(img-Q1FopmFg-1715218517577)]