Vue中Table组件Select的勾选和取消勾选事件详解


Posted in Javascript onMarch 19, 2019

简述

之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件。

勾选

首先我们需要说一下这个需求,如下图:

Vue中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);
 }

总结

还差的远呢,加油吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
JS跨域代码片段
Aug 30 Javascript
javascript解析json数据的3种方式
May 08 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
详解js加减乘除精确计算
Mar 19 #Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 #Javascript
vue多层嵌套路由实例分析
Mar 19 #Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 #Javascript
vue项目移动端实现ip输入框问题
Mar 19 #Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 #Javascript
You might like
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python list转置和前后反转的例子
2019/08/26 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
护士自我评价
2014/02/01 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
实验室安全管理制度
2015/08/05 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL