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

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

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

相关文章
|
2月前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
159 1
|
3月前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
190 5
Vue使用element中table组件实现单选一行
|
2月前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
237 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
3月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
3月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
4月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
280 49
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
170 0
|
4月前
|
JavaScript
Vue3数字输入框(InputNumber)
这是一个可定制的数字输入框组件,支持设置宽度、最小值、最大值、步长、精度等属性,并可添加前缀图标及自定义显示格式。组件兼容键盘快捷键操作,具备禁用功能。示例代码展示了如何使用该组件实现不同场景下的数值输入与格式化展示。组件还利用 `add` 函数解决了 JS 精度问题,并通过 `useSlotsExist` 监听插槽。
326 6
Vue3数字输入框(InputNumber)
|
4月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
4月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
124 0
Vue3表格(Table)