关于前端: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）进行更新，这样能够对一整列进行批量更新了。