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)
    },
    //注:由于有输入项合计需求,因此以聚焦失焦来控制复选框状态从而获取最新输入值。

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

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

相关文章
|
3月前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
265 1
|
3月前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
348 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
4月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
|
5月前
|
JavaScript
Vue3数字输入框(InputNumber)
这是一个可定制的数字输入框组件,支持设置宽度、最小值、最大值、步长、精度等属性,并可添加前缀图标及自定义显示格式。组件兼容键盘快捷键操作,具备禁用功能。示例代码展示了如何使用该组件实现不同场景下的数值输入与格式化展示。组件还利用 `add` 函数解决了 JS 精度问题,并通过 `useSlotsExist` 监听插槽。
387 6
Vue3数字输入框(InputNumber)
|
4月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
3月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
56 0
|
5月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
161 0
Vue3表格(Table)
|
5月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
94 1
|
5月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
5月前
|
JavaScript 程序员
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
这篇文章通过代码示例和效果图,详细阐述了Vue中组件的嵌套使用,包括创建组件、组件间的嵌套、注册组件以及实现的效果。同时,文章还介绍了VueComponent的相关知识,包括组件实例对象和Vue实例对象的区别。
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)