element-ui el-table 实现全选且父级子级联动

   首先在实现这个的时候，我在网上查看了很多别人的代码，有的是按照他上面的方法是没有办法实现，有的没写清楚，有的代码看上去很不简单易懂，在此我就写了这篇博客，记录了实现的具体方法！我觉得是全网最能简单易懂并且百分之百可实现的代码了！！！

首先展示效果图：

                          

 如上图所示，我们主要实现三个功能：

     1.点击参数名称时，实现全选，再次点击，取消全选

     2.点击父的时候，所有的子和参数名称都选中，再次点击，都取消选中

     3.点击任意一个子的时候，父和参数名称都选中，再次点击，取消选中

    我们分别用三个方法实现：

     @select=”select”       //当用户手动勾选数据行的 Checkbox 时触发的事件

     @select-all=”selectAll”    //当用户手动勾选全选 Checkbox 时触发的事件

     @selection-change=”handleSelectionChange”   当选择项发生变化时会触发该事件

     

  我是接收从后端返回的数据，如果你们是自己模拟数据，可参考element-ui table代码

        

   methods:{

  handleSelectionChange(val){

     this.multipleSelection=val;

  },

  Select(selection,row){

   If(selection.some((el)=>row.id===el.id)){

     If(row.children.length>0) {

        row.children.map((0)=>{

           this.$refs.table.toggleRowSelection(i,true);

        });

      }else{

         let parent = this.tableData.find((x=>x.id===row.parentId);

         This.$refs.table.toggleRowSelection(parent,true);

      }else{

    If(row.children.length>0){

      row.children.map((i)=>{

       this.$refs.table.toggleRowSelection(i,false);

});

   }else{

     let parentList=selection.filter((x)=>x.children.length>0);

     for(let i=0;i

        let children=selection.filter(

        (x)=>x.parentId===parentList[i].id

      );

     this.$refs.table.toggleRowSelection(parentList[i],children.length>0);

     }

   }

  }

},  

  selectAll(selection) {

     this.$refs.table.data.map((items) => {

        if (i.children) {

            if (!i.isChecked) {

                this.$refs.table.toggleRowSelection(i, true);

                i.isChecked = true;

                i.children.map((item) => { 

                    this.$refs.table.toggleRowSelection(i, true);

                    i.isChecked = true;

                });

            } else {

                this.$refs.table.toggleRowSelection(i, false);

                i.isChecked = false;

                i.children.map((item) => {

                    this.$refs.table.toggleRowSelection(i, false);

                    i.isChecked = false;

                });

            }

        }

        else{

            if (!i.isChecked) i.isChecked = true;

            else i.isChecked = false;

        }

    });

}

 

 分享结束  ！！！如有不对请指教！！！如有疑问请私信！！！