vue学习day2（记录学习难点）el-input获取静态页面表格数据

最新推荐文章于 2023-03-07 13:18:41 发布
最新推荐文章于 2023-03-07 13:18:41 发布
阅读量405 收藏 1
点赞数
分类专栏： vue学习记录 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52153048/article/details/121107891
版权
本文记录了在Vue.js中如何使用el-input组件获取静态页面表格的数据。通过绑定v-model，可以将表格某一行的数据直接赋值给el-input，实现编辑查看功能。从后端获取数据后，可以直接应用到表格显示。
摘要由CSDN通过智能技术生成

需求：点击编辑查看职位并可以编辑职位

实现：

  1. el-input输入框获取表格某一项数据
  2. 需要绑定v-model
  3. 拿到某一行数据直接赋值就行
  4. 获取后端数据直接拿数据就行

 

 代码

<el-dialog title="编辑职位" :visible.sync="editpositiondialogFormVisible" width="500px">
            <el-form>
              <el-form-item label="职位名称" label-width="100px"> 
                 <el-input  autocomplete="off" style="width:300px" v-model="editform.position" :disabled="true" ></el-input>
              </el-form-item>
最低0.47元/天 解锁文章
_Moution
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件简述limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number安装yarn add vue-limit-input-group 或者npm ...
vue-input-tag：Vue.js 2.0输入标签组件
02-06
import InputTag from 'vue-input-tag' Vue . component ( 'input-tag' , InputTag ) CDN < script src =" https://unpkg.com/vue " > </ script > < script src =" ...
el-popover 点击input框出现table表，可点击选中，可拼音检索完回车选中
jyf_568的博客
06-04 425
<template> <card> <el-popover placement="right" width="400" trigger="click" > <el-table ref="singleTable" :data="pinyinOptions" highlight-current-row style="width: 100%" @curren...
el-input不用调用接口搜索表单数据
请叫我欧皇！的博客
03-07 322
之前写项目一直都会在input调用后台接口再进行查询，下面这个方法就不用，只需要在input表单输入内容，会根据输入的内容自动搜索表单数据。
el表达式 获得本页面input文本框值 input text的v
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
09-03 826
　　取页面值为什么要用EL.表达式 你说错了吧. 又不是Aciont值.Jquery取值可以这么写 　　$('#amount').val() 　　1，首先在电脑上打开浏览器，打开一个页面。 　　2、然后按F12进入页面检查的界面，如下图，选中其中的一个div，将利用这个div直接在里面添加一个input...
获取input值自动求和
m0_37681654的博客
06-12 2805
function sum() { var airTicket=Number($("input[ name='airTicket' ] ").val()); var transportationFee=Number($("input[ name='transportationFee' ] ").val()); var trainFare=Number($("input[ name='train...
Vue的几个常用难点
qq_39203889的博客
03-02 4998
一、window,open()配合this.$router使用 1、参数发送页 // 待传递的参数 var apiTemp = {} apiTemp.testName= row.testName apiTemp.testClass = row.testClass apiTemp.testCode = row.testCode // 与地址绑定，生成对象 const routeDate = this...
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
然而，如果我们需要在触发`change`事件时同时获取到更多的信息，如当前表格行的数据，我们可以这样做： ```html <el-table-column label="用户类型" width="180"> <template slot-scope="scope"> <el-select v...
vue中el-input绑定键盘按键(按键修饰符)
11-20
Element-UI中的`el-input`组件是用于创建输入框的自定义组件，它封装了一些内置功能，比如自动补全、清除按钮等。然而，当我们尝试直接通过键盘事件监听器（如`@keyup`）来捕获键盘事件时，可能会遇到问题。 在Vue...
Element input检索table表格中的数据
weixin_39891473的博客
03-10 672
<template> <div class="table"> <div class="search-Box"> <el-input placeholder="请输入关键字" v-model="search"></el-input> </div> <el-table :data="tables" border style="width: 100%"> <el-t
vue基础难点总结
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
06-10 2410
vue各种各样的命令和语法的格式容易记混vue指令-v-model修饰符语法:v-model.修饰符="vue数据变量".number 以parseFloat转成数字类型.trim 去除首尾空白字符.lazy 在失去焦点时触发更改而非inupt时计算属性计算属性有缓存，提高渲染性能。如果在页面上需要用到 对现有的数据进行加工得到新...
html表格里面加input,el-table中实现点击表格实现填充input实现编辑
weixin_31734677的博客
06-25 730
{{ scope.row.title }}{{scope.row.edit?'完成':'编辑'}}行内多个编辑{{ scope.row.author }}{{scope.row.edit.author?'完成':'编辑'}}{{ scope.row.title }}{{scope.row.edit.title?'完成':'编辑'}}//=================== script ===...
收集el-table中的el-input数据
Dzb1993的博客
05-23 791
使用作用域插槽，将 row.属性名 绑定到你要使用的属性身上即可 （row就是当前行，将input 双向绑定到row的属性上） 这样就可以实现 ：在input中输入数据，即可收集到对应的属性上 ...
vue：input输入框多种用法的取值
helloWorldJavaQi的博客
12-01 1311
vue：input取值的多种用法
如何获得el-input输入框中的数据，适用于普通input
guapilixianghe的博客
07-08 7748
2，方法 3，menthods 这样就可以实现获得el-input输入框中的内容了，此方式对普通的input也适用
element表格添加input列及数据读取
Star——Flying in the cyberspace
08-19 495
el-table中自动添加input列
从本地电脑获取文件路径的组件
longtengg1的博客
04-21 3278
封装一个选取文件的组件。 我们需要的功能只是点击后选择文件，获取文件在本地电脑的绝对路径，然后我们用这个路径自己去上传。 1、结构 1、放一个el-input组件，用于显示选取的文件的路径字符串 element的el-input组件只提供了关于输入文本的功能，没有提供选择文件的功能。 设置readonly属性，使它只能用于显示，而不能输入； v-model绑定路径字符串 2、第一个el-button组件，是嵌套在el-input的插槽，用于点击后触发选取文件 为它绑定点击事件，添加native事件修饰符
input框里默认显示后端查询值并修改值
qq_43117118的博客
04-13 2543
目标：input框里默认显示后端查询值，并可直接修改，失焦时更新 首先使用value绑定数据，可以显示不可修改；然后改为v-model绑定 <el-table-column fixed="right" label="全局参数" min-width="150"> <template slot-scope="scope"> <el-input v-model="scene[scope.$index].global" type="t
vue3el-input获取焦点
最新发布
07-28
在Vue3中，要让el-input获取焦点，可以使用自定义指令来实现。根据引用\[3\]中的代码示例，你可以在directives中注册一个局部的自定义指令v-focus，并在mounted钩子函数中使用el.children\[0\].focus()来获取el-input内部的input元素，并使其获取焦点。这样，当el-input渲染完成后，input元素会自动获取焦点。 #### 引用[.reference_title] - *1* [Vue3.0ElementPlus＜input输入框自动获取焦点＞](https://blog.csdn.net/weixin_45684041/article/details/125276695)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue（ts） - ref & $refs 之el-input获取焦点](https://blog.csdn.net/qq_33242126/article/details/123929054)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods...](https://blog.csdn.net/qinglingLS/article/details/117536589)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值