第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

Vue Js 范圍復(fù)選框選擇帶 shift

Vue Js 范圍復(fù)選框選擇帶 shift

湖上湖 2023-03-24 14:08:55
我有這個(gè) html：<divclass="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>此代碼生成復(fù)選框輸入列表，然后我需要當(dāng)用戶單擊帶有 shift 的標(biāo)簽時(shí)（因?yàn)檩斎胧秋@示：無(wú)），單擊輸入之間的所有復(fù)選框都將選中或取消選中，就像它在此處使用 jquery 所做的那樣我如何進(jìn)行 shift- select像 GMail 這樣的多個(gè)復(fù)選框？但我不知道我怎么能得到它。非常感謝用戶 Spiky Chathu，我按照他說(shuō)的做了，并且它沒(méi)有工作v-model，但是當(dāng)我嘗試使用 v-model 時(shí)，它不起作用。
查看完整描述

2 回答

?
青春有我

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超8個(gè)贊

我想出了一個(gè)解決你的問(wèn)題的方法。我添加了一個(gè)模擬對(duì)象來(lái)重新創(chuàng)建相同的場(chǎng)景，希望您有一個(gè)對(duì)象數(shù)組。


已編輯：已修改解決方案以滿足多個(gè)取消選擇的場(chǎng)景


new Vue({

  el: '#app',

  data: {

    paginatedData: [

      {"link":"https://img.icons8.com/list","idfile":296,"idaccess":2},

      {"link":"https://img.icons8.com/list","idfile":6,"idaccess":99},

      {"link":"https://img.icons8.com/list","idfile":26,"idaccess":29},

      {"link":"https://img.icons8.com/list","idfile":960,"idaccess":2919},

      {"link":"https://img.icons8.com/list","idfile":16,"idaccess":9339},

      {"link":"https://img.icons8.com/list","idfile":2,"idaccess":9},

    ],

    lastCheckedIdx: -1,

    checkedFilesPermission : []

  },

  methods: {

    onClickWithShift(event, idx, idFile) {

  

      var action = (this.checkedFilesPermission.indexOf(idFile) === -1) ? 'select' : 'deselect';

      

      if (event.shiftKey && this.lastCheckedIdx !== -1) {

      

        var start = this.lastCheckedIdx;

        var end = idx-1;

        // can select top to bottom or bottom to top

        // always start with lesser value

        if (start > end) {

          start = idx+1;

          end = this.lastCheckedIdx;

        }

        

        for (var c = start; c <= end; c++) {

          var currentIdFile = this.paginatedData[c]['idfile'];

          this.markSelectDeselect(c, action, currentIdFile);

        }

      }

      

      this.markSelectDeselect(idx, action, idFile);

      this.lastCheckedIdx = idx;

      

      if (this.checkedFilesPermission.length === 0) {

        //reset last checked if nothing selected

        this.lastCheckedIdx = -1;

      }

    },


    markSelectDeselect(idx, action, idFile) {

      

      var currentPos = this.checkedFilesPermission.indexOf(idFile);

      

      if (action === 'select' && currentPos === -1) {

        this.checkedFilesPermission.push(idFile);

      } else if (action === 'deselect' && currentPos !== -1){

        this.checkedFilesPermission.splice(currentPos, 1);

      }

    }

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">

  <div

      class="data__file"

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

      :key="index"

  >

      <input

          :id="data.idfile"

          type="checkbox"

          class="data__access"

          :value="data.idfile"

          v-model="checkedFilesPermission"

      />

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

          <img

              :src="data.link"

              alt=""

              :class= "{ 'data__image' : 1 ,'data__image-active' : (checkedFilesPermission.indexOf(data.idfile) !== -1) }"

          />

      </label>

  </div>

</div>

您需要單擊圖像圖標(biāo)才能看到結(jié)果，因?yàn)槟呀?jīng)提到輸入是隱藏的。我在這里保持它可見(jiàn)，以便您可以看到它實(shí)際上正在發(fā)生變化


查看完整回答
反對(duì) 回復(fù) 2023-03-24
?
大話西游666

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超14個(gè)贊

這是我剛剛嘗試過(guò)的似乎可以完成工作的東西


<template>

  <div>

    <div v-for="(item, index) in items" :key="index">

      <label>

        <input type="checkbox" v-model="item.checked" @click="checked($event, index)">

        {{item.file}}

      </label>

    </div>

    <pre>{{items}}</pre>


  </div>

</template>


<script>


export default {

  data() {

    return {

      lastCheckedIndex: null,

      lastChange: null,

      items: [

        { file: "foo1", idx: 10 },

        { file: "foo2", idx: 20 },

        { file: "foo3", idx: 40 },

        { file: "foo4", idx: 30 },

        { file: "foo5", idx: 10 },

        { file: "foo6", idx: 90 },

        { file: "foo8", idx: 50 },

      ]

    }

  },

  methods: {

    checked(event, index) {

      // wheter or not to the multiple selection

      if (event.shiftKey && (null != this.lastCheckedIndex) && (this.lastCheckedIndex != index)) {


        const dir = index > this.lastCheckedIndex ? 1 : -1; // going up or down ?

        const check = this.lastChange;                      // are we checking all or unchecking all ?


        for (let i = this.lastCheckedIndex; i != index; i += dir) {

          this.items[i].checked = check;

        }

      }


      // save action

      this.lastCheckedIndex = index; 

      this.lastChange = !this.items[index].checked; // onclick is triggered before the default change hence the !

    }

  },

};


</script>



查看完整回答
反對(duì) 回復(fù) 2023-03-24
  • 2 回答
  • 0 關(guān)注
  • 193 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)