vue实现表格单元格的批量复制粘贴

虾米哥 阅读:273 2022-06-06 14:37:48 评论:0

如何在表格单元格中的输入框/下拉框值进行批量复制粘贴至整条列?点击输入框后再点击复制按钮可对当前整条列的输入框都更新为复制的值。

el-table表格template:

  <el-button size="mini" type="primary" @click="copyCell()">复制</el-button> 
 
 <el-table ref="Table"  max-height="500" :data="tableData"> 
    <el-table-column prop="username" min-width="300" label="用户名"> 
           <template slot-scope="scope"> 
               <el-select v-model="scope.row.username"  @change="setCopyVal(scope)"> 
                    <el-option v-for="item in userlist" :key="item.id" :label="item.name" :value="item.id"></el-option> 
                  </el-select> 
          </template> 
     </el-table-column> 
 
     <el-table-column prop="accountNo" min-width="200" label="账户编号"> 
          <template slot-scope="scope"> 
                <el-input type="text" v-model="scope.row.accountNo"  @click="setCopyVal(scope)" ></el-input> 
          </template> 
      </el-table-column> 
 
      <el-table-column prop="Addr" min-width="300" label="地址" show-overflow-tooltip> 
       </el-table-column> 
  </el-table>

注意到有2个列是单元格可编辑的,点击/切换时setCopyVal,把当前点击的控件值存储到data中,供后续的批量粘贴操作

method:

    setCopyVal(scope){ 
       //保存当前焦点输入框的值 
       this.copyVal = { 
         col: scope.column.property, 
         val: scope.row[scope.column.property] 
       }; 
    },

可从scope中获取到当前的列属性名,然后通过属性名去获取到了当前需存储的值,col列属性名 val当前值,相当于模拟了一个复制操作。

此时我们已存储了一个副本,接下来点击复制按钮copyCell对当前列进行批量的复制(粘贴):

  copyCell () { 
   let copyval = this.copyVal; 
      for (let idx in this.tableData) { 
         //把对应的单元格data重新更新 
         this.userData.list[idx][copyval.col] = copyval.val; 
        if ( 
          copyval.col === "username" && 
          this.userlist.includes(copyval.val) 
        ) { //下拉框 
          this.tableData[idx][copyval.col] = copyval.val; 
        } 
      } 
}

遍历所有表格行,并把对应(copyval.col)列名的值(copyval.val)进行更新,这样可以对一整列进行批量更新了。


标签:VUE
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号