el-table中的el-input标签修改值,但界面未更新,解决方法

这篇具有很好参考价值的文章主要介绍了el-table中的el-input标签修改值,但界面未更新,解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

el-table中的el-input标签修改值,界面未更新

在el-table中的el-input里面写的change事件根本不触发,都不打印,试了网络上各种方法都没用
el-table中的el-input标签修改值,但界面未更新,解决方法,element,vue.js,elementui,javascript
然后换成input事件,input事件会触发,但界面也未更新。我在触发事件的时候,生成一个值,用于刷新界面再绑定到el-table上,但会导致界面强制刷新,体验感很差,
el-table中的el-input标签修改值,但界面未更新,解决方法,element,vue.js,elementui,javascript

el-table中的el-input标签修改值,但界面未更新,解决方法,element,vue.js,elementui,javascript

解决

把生成的key值绑定在el-input框上,这样会刷新而且效果可以

  <el-table-column
          label="计划出库数量"
          align="center"
          width="120px"
          :show-oveflow-tooltip="true"
        >
          <template slot-scope="scoped">
            <el-input
              v-model="scoped.row.planQty"
              type="text"
              :maxlength="9"
              size="mini"
              :index="key"
              oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}"
              @input="changeOutPlanQty(scoped.row.planQty,scoped.$index)"
            /></template>
        </el-table-column>

el-table中的el-input标签修改值,但界面未更新,解决方法,element,vue.js,elementui,javascript文章来源地址https://www.toymoban.com/news/detail-741171.html

到了这里,关于el-table中的el-input标签修改值,但界面未更新,解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element UI 中 el-input 标签去掉边框的一种办法

    最近在做一个简单的页面,想把 el-input 去掉边框,在网上找了很多方法,最终发现下边这种方法是可行的: HTML代码: 样式代码如下: 注意这里的样式语言用的是 less,其深度穿透写法是 /deep/。 由此便可去除 el-input 的外边框。

    2024年02月16日
    浏览(46)
  • ElementUI el-input无法输入、修改、删除问题解决

    elementUI是国内前端工程师应该都听过或者使用过的前端框架, 不只使用简单,而且有着详细的文档和 API。使用 el-input 这个标签时,我有些情况下在 el-input 是无法输入的,绑定的值动也动不了,删也删不掉,改也改不了,所以我做了以下的解决方法的统计,希望可以帮助到大

    2024年02月12日
    浏览(53)
  • Element VUE修改 el-input和el-select长度

     没有设置样式之前,采用默认样式,界面如下:  模拟代码如下  为了美观需要修改下样式,使文本框与下拉框的长度一致 第一种:添加style属性,采用行内样式修改长度  第二种:添加class属性,采用内部样式  stule标签中设置长度 第三种:找到element-ui.scss,采用外部样式

    2024年02月11日
    浏览(55)
  • 修改el-select和el-input样式;修改element-plus的下拉框el-select样式

    修改el-select样式 input如下 el-input clearable v-model=\\\"name\\\" placeholder=\\\"请输入\\\" class=\\\"input-with-select input_box\\\" style=\\\"width: 148px;margin: 0 40px;position: absolute;right:67px;\\\" /

    2024年02月13日
    浏览(52)
  • element ui中的el-input回车键事件

    今天项目里面的登录页面,需要按键盘回车键就直接登录,但是测试的时候,按了回车键后,直接刷新页面了,这不是我想要的,之后网上查了一下 代码如下: 上面的写法没问题,但是这样又会出现一个问题,当form表单中只有一个input框时,按回车键,页面还是刷新的。 之

    2024年02月11日
    浏览(59)
  • element-plus el-table、动态添加、删除行、input输入框

    模板部分,使用 el-table 元素作为表格容器,绑定 data 属性传入表格数据。用 v-for 指令遍历每一项数据,使用普通文本或 el-input 组件渲染每个单元格。表格最后一列为操作列,包含 “Add” 和 “Delete” 两个按钮,点击它们可以增加或删除数据行: 逻辑部分,定义 tableData 数据

    2024年02月06日
    浏览(43)
  • el-table 去掉边框(修改颜色)

     原始: 去掉表格的border属性,每一行下面还会有一条线,并且不能再拖拽表头   为了满足在隐藏表格边框的情况下还能拖动表头,修改相关css即可,如下代码 最终效果:     其它代码 

    2024年02月13日
    浏览(44)
  • input改造文件上传,el-table的改造,点击上传,拖拽上传,多选上传

    第一个input标签效果 第二个input标签的效果 el-table的改造效果 3、input本身支持拖拽上传但要设置opcity为0,不能设置diaplay:none或者visiables   如果不使用拖拽上传的话,只点击上传可使用如下 input同时也支持多选文件上传input mutilple/ 4、表格效果 只设置一小框的样式

    2024年02月07日
    浏览(43)
  • el-table表格设置——动态修改表头

    (1.1)使用el-popover,你需要修改的是 this.colOptions,colSelect : (1.2)js代码中的data (1.3)js中的methods (2.1)html代码 (2)js中的method写:

    2024年02月06日
    浏览(54)
  • 修改(elementui)el-table底层背景色

    先给table添加类名(如class=\\\"styleTable\\\") 在style上面添加scoped 写法:类名 ::v-deep .el-table类名{} 注意:给styleTable也设置背景色为透明才生效。 如下图所示👇 单独创建一个css文件,给el-table th,el-table_cell等你要修改的类名添加背景色为透明;在每个vue页面都引用此文件即可生效。

    2024年02月10日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包