标签：deliverNum selection 某列 element 全选 VUE 发货 赋值 row

需求：
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>

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')
      }
    }

看效果：

此方法是本人结合官方文档研究出来的，不足之处请指教。

标签：deliverNum,selection,某列,element,全选,VUE,发货,赋值,row
来源： https://blog.csdn.net/HanXiaoXi_yeal/article/details/122339744

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。