VUE-Table上绑定Input通过render实现双向绑定数据的示例


Posted in Javascript onAugust 27, 2018

效果

VUE-Table上绑定Input通过render实现双向绑定数据的示例

HTML的Table

<Card>
     <div ref="print" >
      <Table  width="100%" height="500" size="small" :columns="columns7" :stripe="true" :data="data" border ></Table>
     </div>
</Card>

JS代码

<script>
  export default {
    data () {
      return {
        columns7: [
     {
      title: '序号',
      type: 'index',
      width: 200
     },
     {
      title: '新批次',
      width: 350,
      key:'newLots'
     },
     {
      title: '数量',
      key: 'numLots',
      width: 350,
      align: 'center',
      render: (h, params) => {
       var vm = this;
       return h('div', [

        h('Input', {
         props: {
         //将单元格的值给Input
         value:params.row.numLots,
         },
         on:{
            'on-change' (event) { 
             //值改变时 
             //将渲染后的值重新赋值给单元格值   
             params.row.numLots = event.target.value;
             vm.data[params.index] = params.row;
           } 
          }
        },)
       ]);
      }
     },
     {
      title: '操作',
      key: 'action',
      width: 350,
      align: 'center',
      render: (h, params) => {
       return h('div', [
        h('Button', {
         props: {
          type: 'error',
          size: 'default'
         },
         style: {
          marginRight: '5px'
         },
         on: {
          click: () => {
           this.openDeleteDialog(params.index)
          }
         }
        }, '删除')
       ]);
      }
     }

    ],
    data: [],
      }
    }
  }
</script>

这样就实现Input和Table单元格数据的双向绑定,取值是直接循环单元格来取值。

双向绑定数据的核心代码:

on:{
            'on-change' (event) { 
             //值改变时 
             //将渲染后的值重新赋值给单元格值   
             params.row.numLots = event.target.value;
             vm.data[params.index] = params.row;
           } 
          }

完成~

以上这篇VUE-Table上绑定Input通过render实现双向绑定数据的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
Angular2自定义分页组件
Apr 19 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
vue监听input标签的value值方法
Aug 27 #Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 #Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 #Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 #Javascript
vue实例中data使用return包裹的方法
Aug 27 #Javascript
vue项目打包部署到服务器的方法示例
Aug 27 #Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 #Javascript
You might like
php 定界符格式引起的错误
2011/05/24 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
推荐dojo学习笔记
2007/03/24 Javascript
js 学习笔记(三)
2009/12/29 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
营销总经理岗位职责
2014/02/02 职场文书
花店创业计划书范文
2014/02/07 职场文书
监督检查工作方案
2014/05/28 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
买房子个人收入证明
2014/10/12 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技