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>

四、看图片(效果)

相关推荐
y先森10 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy10 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891113 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
天涯倦客的美丽人生2 小时前
2024年11月最新版Adobe PhotoShop(26.0)中文版下载
ui·adobe·photoshop
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript