Vue中表组件选择的勾选和取消勾选事件的详细说明

素描

之间设计的界面使用了复选框控件，但是在对官网有所了解之后，我们更倾向于使用一些已经被官网封装的事件，比如表的选择组件被勾选和取消勾选的事件。

支票

首先，我们需要谈谈这个需求，如下图所示：

检查以实现以下效果之一：检查左表的内容，然后将检查的数据发送到右表。

实现代码如下：

===========1.按照官网封装的样式编写Table组件=========模板div Table/Table/div/模板脚本从‘axios’导入axios；export default { data(){ return { hot food data :[]，selectedfooddata3360 []，columnhotfood 3360 [{title : '菜名'，key:'foodName'}，{title : '份数(默认值为份数不限，文本框输入限制')'，key:' perlimitfood '，width:300。align:' center '，///////////////////数据双向绑定//////////////////////////Render :(H，params)该值为：this。hotfooddata [params。索引]。perlimitfood//设置数字}， {“on-change”: event={ this。hotfooddata [params。索引]。permitfood=event。目标。价值；} } });}}，{键入：' selection '，宽度：100，对齐：' center'}，]，列2: [{title :' dish name '，key: 'foodName'}，{title:' limited份数(默认值为无限制份数)'，key :' perlimitfood'}]}方法： } }；/script=============2、将数据传输到绑定的数据(后端传输数据，写入方法)================add(){ var VM=this；//配置热门菜单var URL数据=' http://192 . 168 . 21 . 21033608016/food/queryfoodbyid？food TN=18 '；axios.get(urldata)。然后(function(response){ VM . hotfooddata=response . data；});}，created(){ this . add()；}============3、写入并检查数据传输的事件==============表border 3360 column=' column main food ' : data=' main food data ' @ on-select=' SelectRow ' @ on-select-all=' selectallrow '/在Tablemethod://中单击左表触发事件，并添加元素SelectRow (Selection，Row) {This。选择行数据=行；this . selectedfooddata . push(this . selectrowdata)；console . log(this . selectedfooddata)；}，取消选中

未检查事件类似于检查事件，如下所示(表组件的先前创建代码和数据输入不重复)

在table border : columns=' column main hood ' : data=' main food data ' @ on-select-cancel=' select cancel '/table method://中，单击左侧的表并取消选中它。在右侧，数据也发生了变化。选择取消(选择，行){console.log('查看行-'，行)；this.selectedFoodData.pop(第行)；}摘要

还有很长的路要走。来啊！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。