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

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

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）进行更新，这样可以对一整列进行批量更新了。