Vue Js 范围复选框选择带 shift

Question

我有这个 html：

<div

class="data__file"

v-for="(data, index) in paginatedData"

:key="index"

>

 <label class="data__info" :for="data.idfile" @click="onClickWithShift($event, index)">

   <img

     :src="data.link"

     alt=""

     :class= "{ 'data__image' : 1 ,'data__image-active' : (data.checked === 1) }"

    />

    <input

     v-if="isManager === true"

     type="checkbox"

     class="data__access"

     :value="data.idaccess"

     :checked="(data.checked === 1) ? 1 : null"

     v-model="checkedFilesPermission"      

    />

          

    <input

     v-if="isManager === false"

     type="checkbox"

     class="data__access"

     :value="data.idfile"

     :checked="(data.checked === 1) ? 1 : null"

     v-model="checkedFilesDownload"       

    />

    </label>

</div>

此代码生成复选框输入列表，然后我需要当用户单击带有 shift 的标签时（因为输入是显示：无），单击输入之间的所有复选框都将选中或取消选中，就像它在此处使用 jquery 所做的那样我如何进行 shift- select像 GMail 这样的多个复选框？

但我不知道我怎么能得到它。

非常感谢用户 Spiky Chathu，我按照他说的做了，并且它没有工作v-model，但是当我尝试使用 v-model 时，它不起作用。

Answer 1

我想出了一个解决你的问题的方法。我添加了一个模拟对象来重新创建相同的场景，希望您有一个对象数组。已编辑：已修改解决方案以满足多个取消选择的场景new Vue({&nbsp; el: '#app',&nbsp; data: {&nbsp; &nbsp; paginatedData: [&nbsp; &nbsp; &nbsp; {"link":"https://img.icons8.com/list","idfile":296,"idaccess":2},&nbsp; &nbsp; &nbsp; {"link":"https://img.icons8.com/list","idfile":6,"idaccess":99},&nbsp; &nbsp; &nbsp; {"link":"https://img.icons8.com/list","idfile":26,"idaccess":29},&nbsp; &nbsp; &nbsp; {"link":"https://img.icons8.com/list","idfile":960,"idaccess":2919},&nbsp; &nbsp; &nbsp; {"link":"https://img.icons8.com/list","idfile":16,"idaccess":9339},&nbsp; &nbsp; &nbsp; {"link":"https://img.icons8.com/list","idfile":2,"idaccess":9},&nbsp; &nbsp; ],&nbsp; &nbsp; lastCheckedIdx: -1,&nbsp; &nbsp; checkedFilesPermission : []&nbsp; },&nbsp; methods: {&nbsp; &nbsp; onClickWithShift(event, idx, idFile) {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; var action = (this.checkedFilesPermission.indexOf(idFile) === -1) ? 'select' : 'deselect';&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (event.shiftKey && this.lastCheckedIdx !== -1) {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var start = this.lastCheckedIdx;&nbsp; &nbsp; &nbsp; &nbsp; var end = idx-1;&nbsp; &nbsp; &nbsp; &nbsp; // can select top to bottom or bottom to top&nbsp; &nbsp; &nbsp; &nbsp; // always start with lesser value&nbsp; &nbsp; &nbsp; &nbsp; if (start > end) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; start = idx+1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; end = this.lastCheckedIdx;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; for (var c = start; c <= end; c++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var currentIdFile = this.paginatedData[c]['idfile'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.markSelectDeselect(c, action, currentIdFile);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; this.markSelectDeselect(idx, action, idFile);&nbsp; &nbsp; &nbsp; this.lastCheckedIdx = idx;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (this.checkedFilesPermission.length === 0) {&nbsp; &nbsp; &nbsp; &nbsp; //reset last checked if nothing selected&nbsp; &nbsp; &nbsp; &nbsp; this.lastCheckedIdx = -1;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; markSelectDeselect(idx, action, idFile) {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; var currentPos = this.checkedFilesPermission.indexOf(idFile);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (action === 'select' && currentPos === -1) {&nbsp; &nbsp; &nbsp; &nbsp; this.checkedFilesPermission.push(idFile);&nbsp; &nbsp; &nbsp; } else if (action === 'deselect' && currentPos !== -1){&nbsp; &nbsp; &nbsp; &nbsp; this.checkedFilesPermission.splice(currentPos, 1);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><div id="app">&nbsp; <div&nbsp; &nbsp; &nbsp; class="data__file"&nbsp; &nbsp; &nbsp; v-for="(data, index) in paginatedData"&nbsp; &nbsp; &nbsp; :key="index"&nbsp; >&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :id="data.idfile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="data__access"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :value="data.idfile"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="checkedFilesPermission"&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp;<label class="data__info" :for="data.idfile" @click="onClickWithShift($event, index, data.idfile)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :src="data.link"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt=""&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :class= "{ 'data__image' : 1 ,'data__image-active' : (checkedFilesPermission.indexOf(data.idfile) !== -1) }"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </label>&nbsp; </div></div>您需要单击图像图标才能看到结果，因为您已经提到输入是隐藏的。我在这里保持它可见，以便您可以看到它实际上正在发生变化

Answer 2

这是我刚刚尝试过的似乎可以完成工作的东西<template>&nbsp; <div>&nbsp; &nbsp; <div v-for="(item, index) in items" :key="index">&nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" v-model="item.checked" @click="checked($event, index)">&nbsp; &nbsp; &nbsp; &nbsp; {{item.file}}&nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; </div>&nbsp; &nbsp; <pre>{{items}}</pre>&nbsp; </div></template><script>export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; lastCheckedIndex: null,&nbsp; &nbsp; &nbsp; lastChange: null,&nbsp; &nbsp; &nbsp; items: [&nbsp; &nbsp; &nbsp; &nbsp; { file: "foo1", idx: 10 },&nbsp; &nbsp; &nbsp; &nbsp; { file: "foo2", idx: 20 },&nbsp; &nbsp; &nbsp; &nbsp; { file: "foo3", idx: 40 },&nbsp; &nbsp; &nbsp; &nbsp; { file: "foo4", idx: 30 },&nbsp; &nbsp; &nbsp; &nbsp; { file: "foo5", idx: 10 },&nbsp; &nbsp; &nbsp; &nbsp; { file: "foo6", idx: 90 },&nbsp; &nbsp; &nbsp; &nbsp; { file: "foo8", idx: 50 },&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; checked(event, index) {&nbsp; &nbsp; &nbsp; // wheter or not to the multiple selection&nbsp; &nbsp; &nbsp; if (event.shiftKey && (null != this.lastCheckedIndex) && (this.lastCheckedIndex != index)) {&nbsp; &nbsp; &nbsp; &nbsp; const dir = index > this.lastCheckedIndex ? 1 : -1; // going up or down ?&nbsp; &nbsp; &nbsp; &nbsp; const check = this.lastChange;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // are we checking all or unchecking all ?&nbsp; &nbsp; &nbsp; &nbsp; for (let i = this.lastCheckedIndex; i != index; i += dir) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.items[i].checked = check;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; // save action&nbsp; &nbsp; &nbsp; this.lastCheckedIndex = index;&nbsp;&nbsp; &nbsp; &nbsp; this.lastChange = !this.items[index].checked; // onclick is triggered before the default change hence the !&nbsp; &nbsp; }&nbsp; },};</script>