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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
JavaScript类的继承多种实现方法
May 30 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
PHP将进程作为守护进程的方法
2015/03/19 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Python入门篇之字典
2014/10/17 Python
理解Python中的With语句
2016/03/18 Python
浅谈Python基础之I/O模型
2017/05/11 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
Linux操作面试题
2012/05/16 面试题
《和我们一样享受春天》教学反思
2014/02/07 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python