Vue中Table组件Select的勾选和取消勾选事件详解
时间:2019-03-19
这篇文章主要为大家详细介绍了Vue中Table组件Select的勾选和取消勾选事件详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
简述
之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件。
勾选
首先我们需要说一下这个需求,如下图:
勾选要实现如下的一个效果:对左侧Table的内容进行勾选,然后勾选行的数据传给右侧的Table中。
实现代码如下:
============1、按照官网封装好的样式去写Table组件======= <template> <div> <Table></Table> </div> </template> <script> import axios from "axios"; export default{ data(){ return{ hotFoodData:[], selectedFoodData:[], columnHotFood:[ { title:"菜名", key:"foodName" }, { title:"份数(默认为不限份数,文本框输入限制)", key:"perlimitFood", width:300. align:"center", ///////////////////////数据双向绑定///////////////////////////// render:(h,params)=>{ return h("Input",{ props:{ min:0, value:this.hotFoodData[params.index].perlimitFood //设置数字 }, on:{ "on-change":event=>{ this.hotFoodData[params.index].permitFood=event.target.value; } } }); } }, { type:"selection", width:100, align:"center" }, ], column2: [ { title: "菜名", key: "foodName" }, { title: "限制份数(默认为不限份数)", key: "perlimitFood" } ] } methods:{ } }; </script> ============2、向绑定数据中传送数据(后端传送数据、方法中书写)============= add() { var vm = this; //配置热菜菜单 var urldata = "http://192.168.21.210:8016/Food/QueryFoodByShiId?FoodTN=18"; axios.get(urldata).then(function(response) { vm.hotFoodData = response.data; }); }, created() { this.add(); } ===========3、写勾选传输数据的事件============== <Table border :columns="columnMainFood" :data="mainFoodData" @on-select="selectRow" @on-select-all="selectAllRow" ></Table> method中: //点击左边表格触发事件,向右侧表格添加元素 selectRow(selection, row) { this.selectRowData = row; this.selectedFoodData.push(this.selectRowData); console.log(this.selectedFoodData); },
取消勾选
取消勾选的事件和勾选事件类似,如下(之前table组件的创建代码和数据传入不再重复)
<Table border :columns="columnMainFood" :data="mainFoodData" @on-select-cancel="selectCancel" ></Table> method中: //点击左侧表格,取消勾选,右侧数据也发生改变 selectCancel(selection, row) { console.log("看一下row---------", row); this.selectedFoodData.pop(row); }
总结
还差的远呢,加油吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 微信更新为小程序引入游戏功能,朋友圈又刷屏了
- WCF技术剖析之二十七: 如何将一个服务发布成WSDL[基于WS-MEX的实现](提供模拟程序)
- Linux同步机制(二) - 条件变量,信号量,文件锁,栅栏
- WCF技术剖析之二十七: 如何将一个服务发布成WSDL[基于HTTP-GET的实现](提供模拟程序)
- zookeeper集群搭建
- WCF技术剖析之二十七: 如何将一个服务发布成WSDL[编程篇]
- 浅谈反馈式按钮的设计与实现
- 对比手游和PC游戏的发展,小程序会成为手游开发的热点?
- 雷军旗下金山云再获融资2.2亿美元
- WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[WS标准篇]
- zookeeper配置详解
- WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[元数据描述篇]
- zookeeper命令行(zkCli.sh&zkServer.sh)使用及四字命令
- [WCF的Binding模型]之三:信道监听器(Channel Listener)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在thinkphp5.0路径中实现去除index.php的方式
- Laravel5.5 手动分页和自定义分页样式的简单实现
- laravel自定义分页的实现案例offset()和limit()
- Laravel6.0.4中将添加计划任务事件的方法步骤
- Laravel 不同生产环境服务器的判断实践
- 解决thinkPHP 5 nginx 部署时,只跳转首页的问题
- Laravel 类和接口注入相关的代码
- laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
- laravel 如何实现引入自己的函数或类库
- PHP实现15位身份证号转18位的方法分析
- Yii框架的redis命令使用方法简单示例
- Laravel如何实现自动加载类
- 在Laravel中实现使用AJAX动态刷新部分页面
- laravel 自定义常量的两种方案
- Thinkphp页面跳转设置跳转等待时间的操作