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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
又一个图片自动缩小的JS代码
Mar 10 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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类分享
2014/02/07 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
理解javascript回调函数
2014/12/28 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
python基础教程之缩进介绍
2014/08/29 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python 实现简单的电话本功能
2015/08/09 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python递归全排列实现方法
2018/08/18 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
《七颗钻石》教学反思
2014/02/28 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
安全教育月活动总结
2014/05/05 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
热门专业求职信
2014/05/24 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
python可视化大屏库big_screen示例详解
2021/11/23 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Python 全局空间和局部空间
2022/04/06 Python