VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据_vue elementui table实现动态勾选计算某一列的值

      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="unShipped" label="未发货数" />
      <el-table-column :show-overflow-tooltip="true" prop="price" label="单价">
        <template slot-scope="scope">
          <el-input v-model.number="scope.row.price" />
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="deliverNum" label="发货数量">
        <template slot-scope="scope">
          <el-input v-model.number="scope.row.deliverNum" oninput="value=value.replace(/[^\d]/g,'')" @focus="onfoucs(scope)" @blur="blurUsername(scope)" />
        </template>
      </el-table-column>

2. js方法定义：

// 手动单选（订单）
itemHandleSelectionChange(selection, row) { //selection为当前所选数据集合，row为当前选中行数据
const selected = selection.length && selection.indexOf(row) !== -1
if (selected === true) { //这里只需判断是否勾选，进行相应赋值操作即可
row.deliverNum = row.unShippedNumTemp
} else {
row.deliverNum = 0
}
},
// 手动全选（订单）
itemHandleSelectionAll(selection) {
console.log(全选----, selection)
if (selection.length !== 0) {
selection.map(v => { v.deliverNum = v.unShipped}) //这里将全选的数据遍历后将未发货赋值给发货
this.totalNumer = this.countTotal(selection, ‘unShipped’) //这里是合计方法，之前的博文中有详细介绍
} else {
this.submitCUOrder() //注意这块是判断取消全选后重新调用初始化表格方法，不然发货数无法清0
this.totalNumer = this.countTotal(selection, ‘deliverNum’)
}
}

看效果：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9f49f5d02f9843bd86605bd02b8e2996.gif#pic_center)  
 此方法是本人结合官方文档研究出来的，不足之处请指教。






### 文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。



更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1471537bfd3f5a483690ca477fd3f2b9.png)

**JavaScript**



![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)

**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)