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

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

相关文章
|
8天前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
30天前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
49 1
|
1月前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
115 0
Element UI & Element Plus之改变表格单元格颜色
|
1月前
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
27 1
|
22天前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
68 0
|
2月前
|
存储 开发框架 前端开发
在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
|
1月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
27 0
|
2月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
286 3
|
2月前
软件研发核心问题之在需求拆解过程中,“数据与UI如何关联”的问题如何解决
软件研发核心问题之在需求拆解过程中,“数据与UI如何关联”的问题如何解决
|
2月前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
59 0