vue+elementui实现el-table动态添加行数据

最新推荐文章于 2024-08-07 17:21:28 发布

过去式的美好

最新推荐文章于 2024-08-07 17:21:28 发布

阅读量2.3w

点赞数 4

分类专栏：另类实用 JS Web前端文章标签： vue

本文链接：https://blog.csdn.net/u012138137/article/details/107761278

版权

Web前端同时被 3 个专栏收录

73 篇文章 1 订阅

订阅专栏

另类实用

40 篇文章 1 订阅

订阅专栏

32 篇文章 1 订阅

订阅专栏

在这里插入图片描述思路：
1.不管新增还是编辑都要有添加可编辑的输入行，所以在打开新增或者编辑的弹框或者页面中就要先push一个对象到table数据对象中。
2.要区分我添加的行跟已完成的行。我这边定义的对象中通过设置start为0或者1的值来区分。当行中的start值为0说明是新增可编辑行，否则视为已完成的数据行
3. 通过点击添加按钮把当前行的数据中的start值设置成1并且通过splice添加到数组后面中，再把table数组最后一个对象设置成空，start值改回为0；

let tempRow = JSON.parse(JSON.stringify(this.tableInput.disk));
                tempRow.start = '1';
                this.diskData.splice(-1,0,tempRow);
              
         this.diskData[this.diskData.length - 1].partition = null;
                this.diskData[this.diskData.length-1].size = null;
                this.diskData[this.diskData.length-1].start = '0';

4.提交表单时，应该先判断数组最后一个对象中的start值是否为0；是的话则 this.diskData.splice(this.diskData.length-1,1); 移除数组中最后一个下标对象。这样就把最后一行输入项的移除了。

下面是代码部分
1.vue中data()定义的部分内容

diskData:[],
//table下动态绑定的值
            tableInput:{
                disk:{
                    partition:null,
                    size:null,
                    start:'0'
                },
            }

2.打开新增弹框时的事件部分，添加table输入行

openAddNewDialog(val){
            this.dialogTitle = val;
            this.dialogVisible = true;
            let isExist = false; //是否存在输入行
            if(this.diskData.length>0){
                for(let i=0;i<this.diskData.length;i++){
                    if(this.diskData[i].start == '0'){
                        isExist = true;
                        break;
                    }
                }
                if(!isExist){
                    this.diskData.push(this.tableInput.disk);
                }
            }else{
                this.diskData.push(this.tableInput.disk);
            }
        },

3.html:

{{diskData}}
                                <el-table :data="diskData" height="200">
                                    <el-table-column prop="partition" label="分区" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.start !='0' || scope.row.start == undefined">{{scope.row.partition}}</span>
                                            <el-input v-model="tableInput.disk.partition" v-if="scope.row.start =='0'" style="width:90%;"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="size" label="大小" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.start !='0' || scope.row.start == undefined">{{scope.row.size}}</span>
                                            <el-input v-model="tableInput.disk.size" v-if="scope.row.start =='0'" style="width:90%;"></el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="danger" v-if="scope.row.start !='0' || scope.row.start == undefined"
                                                @click="handleDelete(scope.$index,'disk')"><i class="iconfont icon-delete"></i></el-button>
                                            <el-button size="mini" type="primary" v-if="scope.row.start =='0'"
                                                @click="handleAdd(scope.$index,'disk')"><i class="iconfont icon-add"></i></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

4.点添加按钮功能

handleAdd(index,ipTable){
          switch(ipTable){
            case 'disk':
                if(this.tableInput.disk.partition ==null || this.tableInput.disk.partition.trim()<=0){
                    this.$message.error('请填写分区');
                    return;
                }
                if(this.tableInput.disk.size ==null || this.tableInput.disk.size.trim()<=0){
                    this.$message.error('请填大小');
                    return;
                }
                
                let tempRow = JSON.parse(JSON.stringify(this.tableInput.disk));
                tempRow.start = '1';
                this.diskData.splice(-1,0,tempRow);

                this.diskData[this.diskData.length - 1].partition = null;
                this.diskData[this.diskData.length-1].size = null;
                this.diskData[this.diskData.length-1].start = '0';
                break;
                //多个case
                ........
                ......
                default:

5，删除按钮，删除当前行数据

//删除
        handleDelete(index,ipTable){
            switch(ipTable){
                case 'disk':
                        this.diskData.splice(index,1);
                    break;
                    ...
                    ...
                    default:

6.提交表单数据操作判断是否存在输入行

//先移除输入行
if(this.diskData.length>0){
	if(this.diskData[this.diskData.length-1].start == '0'){
		this.diskData.splice(this.diskData.length-1,1);
	}
}

通过编辑打开弹框的话，先取到table绑定的数据再调用新增的方法。
通过查看按钮打开弹框的话，则只要绑定数据到table中即可，并且把删除按钮设置为不可操作或者不可见。

---------------------华丽分割线----------------------------------
下面是已添加完成行带可上下移动的操作方法—

//向上移动
      moveUp(index,row,ipTable) {
        var that = this;
        switch(ipTable){
            case 'ipv4Pug':
                    if (index > 0) {
                        let upDate1 = that.diskData[index - 1];
                        that.diskData.splice(index - 1, 1);
                        that.diskData.splice(index,0, upDate1);
                    } else {
                        this.$message.info('已经是第一条，不可上移');
                    }
                break;
            default:

        }

      },
//向下移动
      moveDown(index,row,ipTable){
        var that = this;
        switch(ipTable){
            case 'ipv4Pug':
                    if ((index + 1) === that.diskData.length-1){
                        this.$message.info('已经是最后一条，不可下移');
                    } else {
                        let downDate1 = that.diskData[index + 1];
                        that.diskData.splice(index + 1, 1);
                        that.diskData.splice(index,0, downDate1);
                    }
                break;
            default:

        }

      },
      //置顶
      moveTop(index,row,ipTable){
        var that = this;
        switch(ipTable){
            case 'ipv4Pug':
                    if (index === 0){
                        this.$message.info('这是第一条，不能置顶');
                    } else {
                        let downDate1 = that.diskData[index];
                        that.diskData.splice(index, 1);
                        that.diskData.splice(0,0, downDate1);
                    }
                break;
            case 'ipv4Router':
                if (index === 0){
                        this.$message.info('这是第一条，不能置顶');
                    } else {
                        let downDate2 = that.netData[index];
                        that.netData.splice(index, 1);
                        that.netData.splice(0,0, downDate2);
                    }
                break;
            default:

        }

      },