表格实现多行新增

最新推荐文章于 2023-10-19 09:59:40 发布

AllenLM

最新推荐文章于 2023-10-19 09:59:40 发布

阅读量222

点赞数

分类专栏：可复用组件文章标签： vue.js html5 html

本文链接：https://blog.csdn.net/milinfeng/article/details/122458153

版权

可复用组件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

以下为共用方法
代码说明:childTableName 为传过来的数组
     class_info  为初始数据
     功能说明:
     不选择选择器  点击加号  默认新增最后一行   点击减号 提示用户'请选择删除行'
     选择选择器    点击加号  在选择器上一行新增  输入数字框 新增指定行  点击减号  删除选取的行
  deleteData(childTableName: any) {
    let checkedIndex = 0
    this[childTableName].forEach((i,index1)=>{
      if(i.checked === true){
        addIndex = index1
        checkedIndex--
      }
    })
    let addIndex= this[childTableName].length
    this[childTableName] = this[childTableName].filter((item: any) => item.checked === false);
    if(checkedIndex===0){   
     this.$message.info('请选择删除行');
    }
  }

  insertData(childTableName: any,class_info:any) {
    let addIndex= this[childTableName].length
    
    let checkedIndex = 0
    this[childTableName].forEach((i,index1)=>{
      if(i.checked === true){
        addIndex = index1
        checkedIndex++
      }
    })
    
    if(checkedIndex===1){
      for(let i =0;i<this.value1;i++){
        this[childTableName].splice(addIndex,0,class_info())
      }
    }else if(checkedIndex===0){
      for(let i =0;i<this.value1;i++){
        this[childTableName].push(class_info())
      }
    }else{
     this.$message.info('只能选择一行');
    }
  }


以下为页面代码
                              <td colSpan="2">
                                <div class="table-btn">
                                  <a-button
                                    @click="
                                      insertData(
                                        'externalChangeAccountChild',
                                        outChangeStandingBook_infoFn
                                      )
                                    "
                                    size="small"
                                    icon="plus"
                                  >
                                  </a-button>
                                  <a-button
                                    @click="deleteDataList"
                                    size="small"
                                    icon="minus"
                                  ></a-button>
                                </div>
                              </td>


  deleteDataList() {
    this.deleteData("externalChangeAccountChild");
  }