发布时间：2023-12-08 14:24:51
一、在项目需要使用
这个需求主要是在项目中需要用到
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>
四、看图片（效果）
原文：http://www.hzhcontrols.com/new-1857371.html
本文版权归原作者所有
欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利