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

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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>

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

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

.(img-u0AFfoC7-1715799046650)]

[外链图片转存中…(img-3SCLtlqS-1715799046651)]