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

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

画重点：
1.模板定义

<el-table v-show="order"
 ref="multipleTable" 
 :v-loading="loading" 
 border :data="tableDataOrder" 
 height="69vh" 
 style="width: 100%; height: 69vh"
 @select-all="itemHandleSelectionAll" 
 @select="itemHandleSelectionChange" 
 @selection-change="selectionChangeHandler" 
>
			<el-table-column label="序号" width="70" align="left">
	            <template slot-scope="scope">
	              {{ (scope.$index+1) }}
	            </template>
          </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>
</el-table>

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
      }
    },
    // 手动全选（订单）
#### 最后更多分享：**前端字节跳动真题解析**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

- ![](https://img-blog.csdnimg.cn/img_convert/4037e1cf13565b799708a3a965906407.webp?x-oss-process=image/format,png)



4c3ab8389e65ecb71ac0)**

- [外链图片转存中...(img-ArX7mrly-1715798900504)]