在表格中嵌入Input输入框的方法，方便对表格数据进行修改（Element-UI）

最新推荐文章于 2024-05-31 16:45:40 发布
最新推荐文章于 2024-05-31 16:45:40 发布
阅读量4.8k 收藏 11
点赞数
分类专栏： vue项目 文章标签： vue elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46557501/article/details/116272304
版权
本文介绍如何在Vue项目中利用Element-UI组件库，在表格内嵌入Input输入框，实现直接编辑表格数据的功能。通过绑定事件，用户可以方便地修改表格字段值。
摘要由CSDN通过智能技术生成

在表格中嵌入Input输入框，方便我们直接对表格数据进行修改。

效果展示

在这里插入图片描述

效果说明

页面加载渲染数据至Input输入框中，为Input输入框绑定change事件，使用户可以直接在表格中修改字段值。

示例代码

<el-table-column align="center" label="label">
	<template slot-scope="scope"
最低0.47元/天 解锁文章
下一次就是永远
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
el-table嵌套input事件数据修改后没有对整个表格重新渲染
ivanchen7777的博客
04-17 205
试过添加key和行key，表格确实重新渲染了，但是input框会失去焦点无法继续输入。table嵌套input后，blur事件就失效了不知道为啥所以不采用。需求是在input里的值修改后别的行的数据也相应变化，但是更改input值后只渲染了那一行的数据，别的行数据已经更改但是表格并没有更新。但是并没有生效，最终使用下面的方法解决。
elementui中table嵌套input并且当input输入一个数值后，其他input中的值根据计算公式相应改变
m0_50441807的博客
11-10 2404
这里有个误区，就是很多人可能以为change事件是当输入框中的值改变后就会触发，但实际是change只有在input失去焦点的时候才会触发； 这里还需要注意两点：
elementui中的tabel中使用input框实现表格数据编辑
最新发布
Williamqin_的博客
05-31 400
input中使用了v-model，而v-model是双向数据绑定，当input输入后，会把v-model绑定的值改变，所以tabel组件绑定的数据（下面的tableData1）也会相应的发生改变；只需要把tableData1的数据再传给后台，然后再重新调一次接口即可完成表格数据更新；，span标签用于展示数据，而input标签用于编辑数据，通过v-if来控制显示；注：input要使用v-model绑定span中显示的数据，这样就可以实现编辑了。elementuiui中的tabel有个自定义列模板，在。
vue.js element el-talbe 内嵌el-input 无法编辑，视图不刷新（更新）
04-05 4137
不知道为什么el-table里的el-talbe-column内嵌el-input后修改内容后会无法刷新出新内容，实际log看数据是更新了，不过就是试图不刷新 html代码 <el-table-column prop="totalAmount" label="换购价" width="150"> <template slot-scope="scope"> ...
在element的表格中添加编辑（input，输入框）
weixin_44732821的博客
08-10 7772
基于Element上在table中实现行数据单选、编辑
el-table嵌入输入框
weixin_59213769的博客
01-13 4604
el-table嵌入输入框
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成输入框修改数据
seeeeeeeeeee的博客
02-02 8125
这是最近遇到的功能，经常会需要一个表格可以编辑数据类似于excel那种点击一下单元格就可以编辑数据，修改后鼠标移动出去光标消失就会保存数据给后台这里记录一下实现方法，其实也比较简单就是通过角标来判断显示隐藏的。
vue中element-ui table表格 单元格内变成输入框小case
xiaoweistudy的博客
10-19 1312
代码如下： <template> <div> <el-table :data="tableData" height="300" ref="tableData"> <el-table-column prop="num" label="数量"> <template slot-scope="scope"> <el-input v-model="scope.ro.
详解element-ui表格中勾选checkbox，高亮当前行
12-29
我们在做后台管理系统的时候经常需要操作表格，这里我们要实现的一个功能...勾选表格中当前项时会触发selection-change事件，在中绑定handleSelectionChange方法。 <el selection-change=handleSelectionChange > 编
Element Input输入框的使用方法
10-15
在 Element UI 中，`Input` 输入框是基础且重要的组件之一，用于用户输入文本数据。本篇文章将深入探讨 `Element Input` 输入框的使用方法。 ### 基础用法 `<el-input>` 组件是最基本的输入框，可以通过 `v-model`...
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
Element-UI作为一款基于Vue.js的UI组件库，为开发者提供了丰富的界面元素，使得在JSP项目中构建美观、响应式的用户界面变得更加便捷。本文将详细探讨如何在JSP环境中集成Vue.js和Element-UI，并利用Vue.js的第三方...
HTML+Element-ui邮件管理前端界面
07-12
若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui -->...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
然而，在实际应用中，尤其是在表格中嵌入表单元素并进行数据验证时，会遇到一些挑战。本文将详细介绍如何使用Element-UI和Vue.js来解决在表格中包含表单验证的问题。 首先，我们需要理解Element-UI的表单验证机制。...
Labview-将控件嵌入表格教程
06-14
1.将enum控件嵌入表格中。 2.enum列表控件值改变才能写入，当前勾选值未改变导致无法触发写入。 3.将多个enum控件嵌入表格中并指定某列。
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
使用element-ui开发的前端报表页面
02-08
在本文中，我们将深入探讨如何使用Element-UI框架来开发前端报表页面，这对于那些在前端布局上遇到困难或者对在Element-UI中嵌入V-Charts不太熟悉的同学来说，将是一份宝贵的指南。 Element-UI是一款基于Vue.js的...
elementUi 表格双击编辑 输入框赋值后不可编辑的坑
qq_43593142的博客
06-10 2717
##表格双击编辑 ###代码 ####html <el-table id="table_1" :row-class-name="tableRowClassName_1" :data="tableData_1" :summary-method="getSummaries" show-summary highlight-current-row @cell-click="cellClick" style="width: 100%;"> <!--
实现表格可编辑(点击字段出现输入框)vue elementUI
00年女程序员分享自己的学习笔记
04-24 3697
按行保存数据，每行数据最后都有一个保存按钮，使用的是嵌套
【vue+element-ui】表格内嵌套输入框和上传图片的功能
栀妹儿的炼丹炉
03-04 7148
el-table内嵌入el-upload！我拿捏住了
element表格嵌入输入框
10-14
可以使用element-ui中的el-table组件和el-input组件来实现表格嵌入输入框的效果。具体实现方式是在el-table中使用scoped slot的方式来自定义表格的每一列，然后在自定义的列中使用el-input组件来实现输入框。 示例代码如下： ```html <template> <el-table :data="tableData"> <el-table-column label="姓名" prop="name"> <template slot-scope="scope"> <el-input v-model="scope.row.name"></el-input> </template> </el-table-column> <el-table-column label="年龄" prop="age"> <template slot-scope="scope"> <el-input v-model.number="scope.row.age"></el-input> </template> </el-table-column> <el-table-column label="地址" prop="address"> <template slot-scope="scope"> <el-input v-model="scope.row.address"></el-input> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' } ] } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值