這篇文章主要爲大家詳細介紹了Vue中Table組件Select的勾選和取消勾選事件詳解,具有一定的參考價值,感興趣的小夥伴們可以參考一下
簡述
之間設計的界面中使用的是複選框控件,但是經過對官網了一些瞭解,使我們更加傾向於使用一些官網已經封裝好的事件,就比如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); }
總結
還差的遠呢,加油吧!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。