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中的Location地址对象
Jan 16 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
vue.js实现只能输入数字的输入框
Oct 19 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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个人网站架设连环讲(一)
2006/10/09 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
php提交post数组参数实例分析
2015/12/17 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
python函数的作用域及关键字详解
2019/08/20 Python
python如何把字符串类型list转换成list
2020/02/18 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
应届毕业生个人自我评价
2013/09/20 职场文书
美容院考勤制度
2014/01/30 职场文书
学生会干部自荐信
2014/02/04 职场文书
全国文明单位申报材料
2014/05/31 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
工作作风承诺书
2014/08/30 职场文书
公司收款委托书范本
2014/09/20 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2015新学期开学寄语
2015/02/26 职场文书
供应商食品安全承诺书
2015/04/29 职场文书