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 相关文章推荐
在模板页面的js使用办法
Apr 01 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
使用angular写一个hello world
Jan 23 Javascript
理解javascript封装
Feb 23 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 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本地服务器分享
2013/02/19 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
js实现随机点名功能
2020/12/23 Javascript
python实现网站的模拟登录
2016/01/04 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
3分钟演讲稿
2014/04/30 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
A22国内电台短波广播频率表
2022/05/10 无线电
vue3不同环境下实现配置代理
2022/05/25 Vue.js