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

============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 border :columns="columnMainFood" :data="mainFoodData" @on-select-cancel="selectCancel" ></Table>method中：//点击左侧表格，取消勾选，右侧数据也发生改变 selectCancel(selection, row) {  console.log("看一下row---------", row);  this.selectedFoodData.pop(row); }