Keperluan: Klik pada perabot, peralatan rumah dan sub-menu lain, dan semua menu kecil di dalamnya akan dipilih hubungan antara pilihan utama dan sub-menu Sila beritahu saya bagaimana untuk melaksanakan fungsi ini untuk submenu dan menu kecilnya? Kata-kata tidak terungkap dengan baik...

Hanya kendalikannya terus dalam html, gunakan atribut :checked untuk beroperasi

javascript - Soalan tentang fungsi pilih semua vue

Keperluan:
Klik pada sub-menu perabot, peralatan rumah, dan lain-lain, dan semua menu kecil di dalamnya akan dipilih Fungsi semasa adalah untuk memilih semua badan utama dan sub-menu Hubungan antara submenu dan menu kecilnya adalah bagaimana untuk melaksanakan fungsi ini?
Teks tidak begitu jelas, saya akan pergi terus ke kod
https://jsfiddle.net/nj8u0nLo/1/

<p id="app">
  <p>{{a}}</p>
  <ul>
    <li>
    <p><input type="checkbox" v-model="selectAll">全选</p>
    <dl v-for="v in list">
      <dt><input type="checkbox" :value="v.id" v-model="selected">{{v.name}}</dt>
      <dd v-for="n in v.sort"><input type="checkbox" :value="n.id">{{n.name}}</dd>
    </dl>
    </li>
  </ul>
</p>

new Vue ({
    el: '#app',
  data: {
    list: [
      {'id': 1,'name':'家具','sort':[{'id':11,'name':'沙发'}, {'id':12,'name':'凳子'}, {'id':13,'name':'桌子'}]},              {'id': 2,'name':'家电','sort':[{'id':21,'name':'冰箱'}, {'id':22,'name':'电视'}, {'id':23,'name':'风扇'}]},
      {'id': 3,'name':'衣物','sort':[{'id':31,'name':'裤子'}, {'id':32,'name':'衬衫'}, {'id':33,'name':'鞋子'}]}
    ],
    selected: []
  },
  computed: {
      selectAll: {
        get: function(){
          return this.list ? this.selected.length == this.list.length:false
      },
      set: function(value){
          let selected=[]
        if(value){
                    for(let i=0;i<this.list.length;i++){
              selected.push(this.list[i].id)
          }
          this.selected=selected
        }
      }
    }
  },
  created() {
      for(let i=0;i<this.list.length;i++){
      this.selected.push(this.list[i].id)
    }
  }
})

Pilih semua terikat kepada nilai boolean, tetapi submenu terikat kepada tatasusunan Bagaimana untuk menangani situasi ini? Atau ada kes untuk saya rujuk? !

黄舟2755 hari yang lalu1138

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script> </head> <body> <p id="app"> <p> <label> <input type="checkbox" v-model="selectAll" @click="all">全选</label> </p> <dl v-for="(item,index) in list" v-key="item.id"> <dt> <label> <input type="checkbox" :value="item.id" v-model="item.all" @change="sl(index)">{{item.name}}</label> </dt> <dd v-for="(subItem,idx) in item.sort" v-key="subItem.id" @change="ssl(index)"> <label> <input type="checkbox" v-model="subItem.all" :value="subItem.id">{{subItem.name}}</label> </dd> </dl> </p> <script> var vm = new Vue({ el: "#app", data: { selectAll: false, list: [{ id: 1, name: '家具', sort: [{ id: 11, name: '沙发', all: false }, { id: 12, name: '凳子', all: false }, { id: 13, name: '桌子', all: false }], all: false }, { id: 2, name: '家电', sort: [{ id: 21, name: '冰箱', all: false }, { id: 22, name: '电视', all: false }, { id: 23, name: '风扇', all: false }], all: false }, { id: 3, name: '衣物', sort: [{ id: 31, name: '裤子', all: false }, { id: 32, name: '衬衫', all: false }, { id: 33, name: '鞋子', all: false }], all: false }], }, methods: { sl: function(e) { this.selectAll = this.list.every((item, index) => (item.all)); this.list[e].sort.forEach((v, i) => { v.all = this.list[e].all; }); }, ssl: function(e) { this.list[e].all = this.list[e].sort.every((item, index) => (item.all)) this.selectAll = this.list.every((item, index) => (item.all)) }, all: function() { this.list.forEach((item, index) => { item.all = this.selectAll; item.sort.forEach((v, i) => { v.all = this.selectAll; }) }) } } }) </script> </body> </html>

javascript - Soalan tentang fungsi pilih semua vue

membalas semua(2)saya akan balas