javascript - 关于vue全选功能的问题
黄舟
黄舟 2017-06-12 09:27:49
0
2
1111

需求:
点击家具,家电等子菜单,它里面的小菜单也会全选,小菜单少选一个就会取消其父菜单的全选行为
现在的功能做到的是主体全选和子菜单的关系,请问子菜单和它的小菜单要实现这种功能要怎么做?
文字表达得不是很清晰,我直接上代码吧
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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板