实现效果实现逻辑和代码html代码datadatadata(){return{renderDynamic:[{id:1,parentId:0,date:"2016-05-02",姓名："王小虎",地址："上海市普陀区金沙江路1518弄",},{id:2,parentId:0,date:"2016-05-01",name:"WangXiaohu",address:"Lane1519,JinshajiangRoad,PutuoDistrict,Shanghai",children:[{id:3,parentId:2,date:"2016-05-01",name:"WangXiaohu",address:"Lane1519,JinshajiangRoad,PutuoDistrict,Shanghai",children:[{id:4,parentId:3,date:"2016-05-01",name:"WangXiaohu",address:"Lane1519,JinshajiangRoad,PutuoDistrict,Shanghai",},{id:5,parentId:3,date:"2016-05-01",name:"WangXiaohu",address:"Lane1519,JinshajiangRoad,PutuoDistrict,Shanghai",},],},{id:6,parentId:2,date:"2016-05-01",name:"WangXiaohu",address:"Lane1519,JinshajiangRoad,PutuoDistrict,Shanghai",},],},],};}，表单数据加入选中标志isSelect状态：true为选中状态，false为未选中状态，空字符串为未知状态初始化数据mounted(){this.initData(this.renderDynamic);},设置标志字段//初始化数据initData(data){data.forEach((item)=>{item.isSelect=false;//默认不选中if(item.children&&item.children.length){this.initData(item.children);}});},复选框点击事件selectFun(selection,row){this.setRowIsSelect(row);},checkboxclickeventsetRowIsSelect(row){//当点击父点的checkbox时，当前状态可能是未知的，所以设置当前行状态为false并选中，达到选中所有子点的效果if(row.isSelect===""){行。isSelect=false;this.$refs.product.toggleRowSelection（行，真）；}row.isSelect=!row.isSelect;让那个=这个；functionselectAllChildrens(data){data.forEach((item)=>{item.isSelect=row.isSelect;that.$refs.product.toggleRowSelection(item,row.isSelect);if(item.children&&item.children.长度）{selectAllChildrens（item.children）；}});}functiongetSelectStatus(selectStatuaArr,data){data.forEach((childrenItem)=>{selectStatuaArr.push(childrenItem.isSelect);如果(childrenItem.children&&childrenItem.children.length){getSelectStatus(selectStatuaArr,childrenItem.children);}});返回选择状态；}functiongetLevelStatus(row){//如果当前节点的parantId=0且有子节点则为1//如果当前节点为3if(row.parentId==0){if(row.children&&row.children.length){返回1;}else{返回4;}}else{if(!row.children||!row.children.length){返回3;}else{返回2;}}}让结果={};//获取显式节点函数getExplicitNode(data,parentId){data.forEach((item)=>{if(item.id==parentId){result=item;}if(item.children&&item.children.length){getExplicitNode(item.children,parentId);}})返回结果；}functionoperateLastLeve(row){//操作的是子节点1，获取父节点2，判断选中的子节点个数，如果全部选中，则父节点置为选中状态，如果没有选中，如果是部分选中，则设置为不清楚状态letselectStatuaArr=[];让item=getExplicitNode(that.renderDynamic,row.parentId);selectStatuaArr=getSelectStatus(selectStatuaArr,item.children);如果(selectStatuaArr.every((selectItem)=>{returntrue==selectItem;})){item.isSelect=true;那.$refs.product.toggleRowSelection(item,true);}elseif(selectStatuaArr.every((selectItem)=>{返回假==选择项；})){item.isSelect=false;那.$refs.product.toggleRowSelection(item,false);}else{item.isSelect="";}//还有parentif(item.parentId!=0){operateLastLeve(item)}}//判断操作是子点复选框还是父点复选框。如果是父点，控制是否选中所有子点Select//1，只有parentlevel2，既是子集又是parentlevel3，只有childlevelletlevelSataus=getLevelStatus(row);如果(levelSataus==1){selectAllChildrens(row.children);}elseif(levelSataus==2){selectAllChildrens(row.children);操作最后一列（行）；}elseif(levelSataus==3){operateLastLeve(row);}}，检查是否所有表数据都被选中checkIsAllSelect(){this.oneProductIsSelect=[];this.renderDynamic.forEach((item)=>{this.oneProductIsSelect.push(item.isSelect);});//判断一级商品是否全部选中。如果所有一级产品都为真，则设置为取消所有选择，否则全选让isAllSelect=this.oneProductIsSelect.every((selectStatusItem)=>{returntrue==selectStatusItem;});返回isAllSelect；},表全部选择事件selectAllFun(selection){letisAllSelect=this.checkIsAllSelect();这个.renderDynamic。forEach((item)=>{item.isSelect=isAllSelect;this.$refs.product.toggleRowSelection(item,!isAllSelect);this.selectFun(selection,item);});},当表格行样式为当前行状态不确定时，添加样式使复选框为不确定状态样式rowClassNameFun({row}){if(row.isSelect===""){return"不定”;}},tabletitlestyle当一级目录处于歧义状态时，添加样式使复选框处于歧义状态。StyleheaderRowClassName({row}){让oneProductIsSelect=[];this.renderDynamic.forEach((item)=>{oneProductIsSelect.push(item.isSelect);});如果（oneProductIsSelect.includes（“”））{返回“不确定”；}返回””;},更改复选框样式code.indeterminate.el-checkbox__input.el-checkbox__inner{background-颜色：#409eff！重要；边框颜色：#409eff！重要；颜色：#fff!important;}.indeterminate.el-checkbox__input.is-checked.el-checkbox__inner::after{transform:scale(0.5);}.indeterminate.el-checkbox__input.el-checkbox__inner{background-color:#f2f6fc；border-color:#dcdfe6;}.indeterminate.el-checkbox__input.el-checkbox__inner::after{border-color:#c0c4cc!important;背景颜色：#c0c??4cc;}.product-showth.el-checkbox__inner{display:none!important;}.indeterminate.el-checkbox__input.el-checkbox__inner::after{content:"";位置：绝对；显示：块；背景色：#fff；高度：2px；变换：比例（0.5）；左：0；右：0；顶部：5px；宽度：自动！重要；}.product-show.el-checkbox__inner{显示：块！重要；}.product-show.el-checkbox{显示：块！重要；}
