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 添加/移除CSS类实现代码
Feb 11 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
浅析javascript 定时器
Dec 23 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 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支持页面回退的两种方法
2008/01/10 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
vue接口请求加密实例
2020/08/11 Javascript
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python学习小技巧总结
2018/06/10 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
置业顾问岗位职责
2014/03/02 职场文书
西式婚礼主持词
2014/03/13 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
文艺晚会主持词
2014/03/24 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
销售工作决心书
2015/02/04 职场文书
居委会工作总结2015
2015/05/18 职场文书
教师调动申请报告
2015/05/18 职场文书