【前端】vue采用el-table 添加行手动填写数据和删除行及提交

这篇具有很好参考价值的文章主要介绍了【前端】vue采用el-table 添加行手动填写数据和删除行及提交。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        需求:点击新增按钮实现下列弹窗的效果,点击添加行新增一行,点击删除进行删除行,点击提交将数据传递到后端进行保存。

目录

代码

data

methods


实现效果文章来源地址https://www.toymoban.com/news/detail-742069.html

el-table 添加行,Frontend,elementui,前端,javascript

代码

      <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{
          //录入数据字典资产信息
          dataId: 1,
          //数据字典资产信息的集合
          tableData: [],
          //数据字典资产信息录入
          openDataDictionary: false,
          //数据字典资产信息录入弹出框标题
          titleDataDictionary: "",
        }
      }
      

methods

methods: {
    /** 删除按钮操作 */
    handleDeleteDataDictionary(index, rows) {
      alert("index" + index);//这个index就是当前行的索引坐标
      this.$modal.confirm('是否删除当前行?').then(function () {
        rows.splice(index, 1); //对tableData中的数据删除一行
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },


    //   添加行
    addDemo() {
      var d = {
        index: this.dataId++,
        assetNo: "", //资产编号实时回显
        riskSourceName: "",
        riskLevel: "",
        riskPointName: "",
        type: "",
        hiddenDanger: "",
        dangerLevel: "",
        accident: "",
        remark: ""
      };
      this.tableData.push(d);
      setTimeout(() => {
        this.$refs.demoTable.setCurrentRow(d);
      }, 10);
    },

    /**
     * 数据字典资产信息录入点击提交执行的方法
     * */
    handleDataDictionaryAssetInfo() {
      addDataDictionaryAssetInfo(this.tableData).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.open = false;
      });
    },

到了这里,关于【前端】vue采用el-table 添加行手动填写数据和删除行及提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】vue3+ts+vite,el-table表格渲染记录重复情况

    给自己一个目标,然后坚持一段时间,总会有收获和感悟! 在使用vue的过程中,总会遇到一些有疑问的地方,总结就能够加深印象,下次再出现的时候也有个参考的地方。 Element UI 的 el-table 组件是一个强大的表格组件,提供了许多常见的属性来配置和定制表格的外观和行为

    2024年02月04日
    浏览(51)
  • vue纯前端导入excel,获取excel的表格数据渲染el-table

    最近有个需求,最开始列表数据是通过新增按钮一条条添加的,但是部分数据量可能上百条,客户自己手选会很慢,所以产品经理给了个需求要求可以通过上传excle文件进行导入。 经过网上查询及涉及自己项目,实现了此功能。 第一步:安装插件,我安的是0.16.0;原因是默认

    2024年02月16日
    浏览(54)
  • 【vue】element-ui、el-table使用V-for循环动态添加表头和数据

    参考链接 https://blog.csdn.net/xz1589155358/article/details/126597271

    2024年02月11日
    浏览(71)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(66)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(57)
  • 【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式

    首先需要了解俩个函数,row-class-name、cell-class-name 这里以cell-class-name单元格样式为例 row-class-name 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String cell-class-name 单元格的 className 的回调方法,也可以使用字符串为所有单元

    2024年01月24日
    浏览(53)
  • Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:         当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要

    2024年01月20日
    浏览(55)
  • 如何给el-table添加选中高亮

    首先给el-table添加属性highlight-current-row,当点击当前行的时候会有个默认的高亮 然后可以根据设计图修改选中行的高亮颜色 如果需要做选中的逻辑处理,那么可以给el-table绑定current-change事件

    2024年02月13日
    浏览(52)
  • el-table实现纯前端导出(适用于el-table任意表格)

    2023.9.1今天我学习了如何使用el-table实现前端的导出功能,该方法的好处有无论你的el-table长什么样子,导出之后就是什么样子。 1.安装三个插件 npm install file-save npm install xlsx npm install xlsx-style 2.创建Export2Excel.js 3.按需引入 4.vue.config.js引入 效果: 扩展: 当我们会出现这样的表

    2024年02月10日
    浏览(51)
  • el-table 添加合计,合计某一列

    效果图:  1.   使用elementui 官网上的方法 如果是只要是数值,就要合并,就只设置show-summary 即可。     2.  html: 3. js : 参考: el-table合计行合并自定义列数,单独合计某一列_刘远航,的博客-CSDN博客

    2024年02月13日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包