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

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

需求:

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

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

相关文章
|
2天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
12 3
|
2月前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
153 58
|
4天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
19 2
|
2月前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
45 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
20天前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
591 2
|
2月前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
在 Vue3 中,如何使用 setup 函数创建响应式数据?
在 Vue3 中,如何使用 setup 函数创建响应式数据?
|
2月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
20天前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
31 0
|
25天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
28 0