VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行

简介: VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行

步骤:
表格中直接插槽法:

<el-table-column :show-overflow-tooltip="true" prop="number" label="发货数量">
                  <template slot-scope="scope">
                    <el-input v-model.number="scope.row.number" @focus="onfoucs(scope)" @blur="blurUsername(scope)" />
                  </template>
</el-table-column>

input中聚焦和失焦事件控制复选框状态:

// 输入框聚焦事件
    onfoucs(val) {
      const selected = false //聚焦取消勾选
      this.$refs.multipleTable.toggleRowSelection(val.row, selected) //ref定义在el-table中
    },
    // 输入框失焦事件
    blurUsername(val) {
      const selected = true //失焦勾选
      this.$refs.multipleTable.toggleRowSelection(val.row, selected)
    },
    //注:由于有输入项合计需求,因此以聚焦失焦来控制复选框状态从而获取最新输入值。

来看效果:
在这里插入图片描述
亲测有效,需要的直接贴代码即可。

合计方法之前的文章中有介绍勾选合计某列的值

相关文章
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
1125 6
Vue使用element中table组件实现单选一行
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
854 0
Vue3表格(Table)
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
319 1
|
计算机视觉
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
473 1
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
1688 0
Element UI & Element Plus之改变表格单元格颜色
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
876 0
|
JavaScript 索引
vue——element-ui中的表格和分页器连接起来
vue——element-ui中的表格和分页器连接起来
|
4月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
404 2
|
3月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
361 137

热门文章

最新文章