javascript - 關於vue全選功能的問題
黄舟
黄舟 2017-06-12 09:27:49
0
2
1106

需求:
點擊家具,家電等子選單,它裡面的小選單也會全選,小選單少選一個就會取消其父選單的全選行為
現在的功能做到的是主體全選和子選單的關係,請問子選單和它的小選單要實現這種功能要怎麼做?
文字表達得不是很清晰,我直接上程式碼吧
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)
    }
  }
})

#全選是綁定一個boolean值的,但是子選單綁定是是一個數組,請問這種情況怎麼處理?或是有沒有案例讓我參考一下呢~虛心求教啊~! !

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回覆(2)
左手右手慢动作

直接在html裡面操作就行了,用:checked屬性操作

大家讲道理

寫了很爛的版本,肯對你是否要幫助

<!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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板