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 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
详解原生JS动态添加和删除类
Mar 26 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php 无限极分类
2008/03/27 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
js实现五星评价功能
2017/03/08 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
React简单介绍
2017/05/24 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python 容器总结整理
2017/04/04 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
张丽莉观后感
2015/06/16 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python