VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据

61 篇文章 2 订阅
49 篇文章 9 订阅

需求:
1. 发货数量默认为0,用户可自行输入;
2. 点击复选框将未发货数动态赋值给发货数,取消复选发货数为0;
3. 点击全选框将每行的未发货数赋值给对应发货数,取消全选发货数为0。
实现步骤:
画重点:
在这里插入图片描述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>
  1. 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')
      }
    }

看效果:
在这里插入图片描述
此方法是本人结合官方文档研究出来的,不足之处请指教。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赫兹/Herzz

如果我的博文帮助到您请打赏支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值