vue 多選、全選和選中刪除問題
阿新 • • 發佈:2019-01-03
<div id="vueContainer"> <div> <input type='checkbox' class='input-checkbox' :checked="fruitIds.length === fruits.length" @click='checkedAll()'>全選 <div v-for='(fruit, index) in fruits' :key="index"> <!--判斷fruitIds是否包含當前fruit,fruitIds.indexOf(fruit.fruitId)返回包含fruit的下標, 若不包含則返回-1--> <input type='checkbox' :checked="fruitIds.indexOf(fruit.fruitId) > -1" name='checkboxinput' class='input-checkbox' @click='checkedOne(fruit.fruitId)'> {{fruit.value}} </div> <!--預設刪除按鈕不能點選, 當選中某一checkbox時可以刪除--> <button :disabled="!fruitIds.length>0" value="Delete" @click="deleteFruits()">Delete</button> </div> </div>
<script> var vue = new Vue({ el: "#vueContainer", data: { fruits:[{ fruitId:'1', value:'蘋果' },{ fruitId:'2', value:'荔枝' },{ fruitId:'3', value:'香蕉' },{ fruitId:'4', value:'火龍果' } ], fruitIds:['1','3','4'], isCheckedAll: false }, methods:{ checkedOne (fruitId) { let idIndex = this.fruitIds.indexOf(fruitId) if (idIndex >= 0) { // 如果已經包含了該id, 則去除(單選按鈕由選中變為非選中狀態) this.fruitIds.splice(idIndex, 1) } else { // 選中該checkbox this.fruitIds.push(fruitId) } }, checkedAll () { this.isCheckedAll = !this.isCheckedAll if (this.isCheckedAll) { // 全選時 this.fruitIds = [] var _that = this // 此寫法 其實就是非同步函式 this 的指向問題,傳入一個this引數 // this.fruits.forEach(function (fruit) { // console.log(fruit) // this.fruitIds.push(fruit.fruitId) // },this) this.fruits.forEach((val,index) =>{ this.fruitIds.push(val.fruitId) }) } else { this.fruitIds = [] } }, deleteFruits () { var newDate = []; this.fruits.forEach((val,index) => { if (!(this.fruitIds.indexOf(val.fruitId) > -1)) { newDate.push(val) } }) this.fruits = newDate; this.fruitIds = []; // var arr = []; // var len = this.fruits.length; // for(var i=0;i<len;i++){ // if(this.fruitIds.indexOf(this.fruits[i].fruitId)>=0){ // console.log(this.fruitIds.indexOf(i)); // }else { // console.log(this.fruits[i]); // arr.push(this.fruits[i]); // } // } // this.fruits = arr; // this.fruitIds = []; } } }); </script>
參考了部落格 https://www.cnblogs.com/smileself/p/checkAll.html
並在其基礎上新增了刪除操作,如有問題歡迎道友留言