Element-Ui el-table 动态添加行

一、在项目需要使用

这个需求主要是在项目中需要用到

1.点击新增按钮,可以实现新增行。

2.在每个列里面可以进行输入。

3.可以删除新增的行,包括数据。

二、HTML代码

1.主要是循环每一个列,而且这些列都是动态,根据父组件传过来的,这样可以动态的决定要多少的数据。

2.:data="tableData" 这个才是决定行的代码,可以通过push的方法新增行或者减少行。

<template>
  <div class="add-table">
    <el-button class="mb10" size="mini" type="primary" @click="addTableRow">新 增</el-button>
    <el-table :data="tableData" stripe highlight-current-row border ref="addTableRowRef">
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column align="center" v-for="(item,index) in dataList" :prop="item.code" :label="item.name" :key="index">
        <template slot-scope="scope">
          <el-input v-model="scope.row[item.code]"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-delete"  @click="handleDeleteRow(scope.$index,tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

三、JavaScript代码

<script>
export default {
  name: 'AddTable',
  props: {
    rowTitle: {
      type: Array,
      default() {
        return []
      }
    },
    rowObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    rowTitle: {
      handler: function(newValue) {
        if(newValue.length > 0) {
          this.dataList = newValue
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      tableData: [],
      dataList: []
    }
  },
  methods: {
  addTableRow() {
      var addObj = {};
      this.rowTitle.forEach(el => {
        addObj[el.code] = ''
      })
      this.tableData.push(addObj);

      // this.tableData.push(this.rowObj);
      setTimeout(() => {
        this.$refs.addTableRowRef.setCurrentRow(addObj);
      }, 10);
    },

    handleDeleteRow(index, rows) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
  },
}
</script>

四、看图片(效果)

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro