vue2.0全选，全不选（数据有选中状态的字段时）

最新推荐文章于 2024-01-29 10:04:50 发布

伏见伊奈里

最新推荐文章于 2024-01-29 10:04:50 发布

阅读量943

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_35313994/article/details/66971374

版权

vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

通过为选中状态的标签加类名checked，使其选中。子列表中所有选中，全选按钮自动选中。
需要引入vue.js
html

<div id="app">
    <div class="row">
           <div class="col-sm-3">
               <div class="relatedInstance">
                   <h2>相关实体</h2>
                   <ul>
                       <li id="" v-for="(entity,index) in entities">
                           <h3  @click="toggleBar(index)"  data-name="person">{{entity.text}}<b  :class="{'checked':entity.isChecked}" @click.stop="checkall(index)"></b>
                               <span :class="[entity.isShow?'glyphicon-minus':'glyphicon-plus']" class="glyphicon"></span></h3>
                           <ul v-show="entity.isShow">
                               <li v-for="(list,listIndex) in entity.child.list">
                                   <b  @click="checklist(index,listIndex)" :class="{'checked': list.isChosed}"></b><span @click="showkeyWord">{{list.text}}</span>
                                   <span>(630)</span>
                               </li>
                           </ul>
                           <h5 @click="morelist" v-show="" class="more" data-pages="1"><div>更多</div></h5>
                       </li>
                   </ul>

               </div>
           </div>
       </div>
  </div>

  <script src="js/vue.js"></script>
  <script>
    var newlist = new Vue({
      el:'#app',
      data:{
            entities:[
              {text:'人员',isShow:false,child:{list:[{text:'F-35 program',isChosed:false},{text:'F-35 program',isChosed:false}],isChecked:false}},
              {text:'项目',isShow:false,child:{list:[{text:'F-35 program1',isChosed:false},{text:'F-35 program2',isChosed:false}],isChecked:false}}
            ],
            // isShow: false,
            // isChecked:false,
            // isChosed:false,
            chosedList:[[],[]],
            chosedUl:'',

        },
        methods: {
            toggleBar: function(index) {
                for(var i in this.entities){
                    if(i!=index){
                        this.$set(this.entities[i],'isShow',false);
                    }
                }
                this.$set(this.entities[index],'isShow',!this.entities[index].isShow);
                this.chosedUl=this.entities[index].text;

            },
            checkall:function (index) {
                var isChecked=!this.entities[index].isChecked;

            	this.$set(this.entities[index],'isChecked',!this.entities[index].isChecked);

                for(var i in this.entities[index].child.list){
                    var dt=this.entities[index].child.list[i];
                    this.$set(dt,'isChosed',isChecked);
                    if(isChecked) this.chosedList[index].push(dt.text);

                }

                if(!isChecked) this.chosedList[index].splice(0,this.chosedList[index].length);

            },
            checklist:function (ulIndex,listIndex) {

            	var dt=this.entities[ulIndex].child.list;
                this.$set(dt[listIndex],'isChosed',!dt[listIndex].isChosed);

                if(dt[listIndex].isChosed) this.chosedList[ulIndex].push(true)
                else  this.chosedList[ulIndex].splice(ulIndex, 1);

				if(this.chosedList[ulIndex].length === dt.length) this.$set(this.entities[ulIndex],'isChecked',true);
				else this.$set(this.entities[ulIndex],'isChecked',false);

            },
            showkeyWord:function () {

            },
            morelist:function () {

            }
        },

    })
  </script>

结果