前言：第一次写文章，因为自己的技术深度和广度不够，所以一直很怕写文章，我总是看别人的文章。去年年底，我曾计划发表一篇深度文章，但深度一直不够。就先发一篇有水分的文章试试看吧。如果您不喜欢它，请不要喷它。如果大家有好的建议和想法，可以提出来，共同学习。小女孩经受不住打击。实现效果实现逻辑和代码html代码-class-name="headerRowClassName"//表头样式size="mini"max-height="500px"style="width:100%"@select="selectFun"//复选框点击事件@select-all="selectAllFun"//表格全选事件@selection-change="selectionChange":header-cell-style="{background:'#fafafa'}">添加表格数据是否被选中的标志。isSelect状态：true为选中状态，false为未选中状态，空字符串为未知状态this.renderDynamic.forEach((item)=>{item.isSelect=false;//默认未选中})复选框点击事件selectFun(selection,row){this.setRowIsSelect(row);},checkboxclickeventsetRowIsSelect(row){//当父点checkbox被点击时，当前状态可能是未知的，所以将当前行状态设置为false并选中，即可实现子点全选效果if(row.isSelect===""){row.isSelect=false;this.$refs.product.toggleRowSelection（行，真）；}row.isSelect=!row.isSelect;//判断操作的是子点复选框还是父点复选框，如果是父点，则控制是否选中所有子点选择if(row.children&&row.children.length>0){row.children.forEach((item)=>{item.isSelect=row.isSelect;this.$refs.product.toggleRowSelection(item,row.isSelect);});}else{//操作是子节点1，获取父节点2，判断选中的子节点个数，如果全部选中，则父节点被选中，如果没有选中，则取消选中，如果部分选中,设置为模糊状态letparentId=row.parentId;this.renderDynamic.forEach((item)=>{letisAllSelect=[];if(item.id==parentId){item.children.forEach((childrenItem)=>{isAllSelect.push(childrenItem.isSelect);});if(isAllSelect.every((selectItem)=>{returntrue==selectItem;})){item.isSelect=true;this.$refs.product.toggleRowSelection(item,true);}elseif(isAllSelect.每个（（selectItem）=>{返回false==selectItem;})){item.isSelect=false;this.$refs.product.toggleRowSelection(item,false);}else{item.isSelect="";}}});}}，检查表数据是否全部被选中checkIsAllSelect(){this.oneProductIsSelect=[];this.renderDynamic.forEach((item)=>{this.oneProductIsSelect.push(item.isSelect);});//判断一级商品是否全部选中。如果第一层Ifallproducts都为true，则设置取消所有选择，否则全选返回isAllSelect；},表全部选择事件selectAllFun(selection){letisAllSelect=this.checkIsAllSelect();this.renderDynamic.forEach((item)=>{item.isSelect=isAllSelect;this.$refs.product.toggleRowSelection(item,!isAllSelect);this.selectFun(selection,item);});},tablerowstyle当前行状态不定时，添加一个样式，使checkbox处于不确定状态stylerowClassNameFun({行}){如果(row.isSelect===""){返回"不确定";}},tabletitlestyle当一级目录有不确定状态时，添加一个样式使其成为未选中状态显式状态样式headerRowClassName({row}){letoneProductIsSelect=[];this.renderDynamic.forEach((item)=>{oneProductIsSelect.push(item.isSelect);});如果（oneProductIsSelect.includes（“”））{返回“不确定”；}返回””;}，更改复选框样式代码.avue-form:not(.avue--detail).indeterminate.el-checkbox__input.el-checkbox__inner{background-color:#409eff!重要的;边框颜色：#409eff！重要；颜色：#fff!important;}.avue-form.avue--detail.indeterminate.el-checkbox__input.el-checkbox__inner{背景颜色：#F2F6FC;#DCDFE6;}.avue-form.avue--detail.indeterminate.el-checkbox__input.el-checkbox__inner::after{border-color:#C0C4CC!important;背景色：#C0C4CC;}.avue--细节。产品展示.el-checkbox__inner{显示：无！important;}.indeterminate.el-checkbox__input.el-checkbox__inner::after{内容：“”；位置：绝对；显示：块；背景色：#fff；高度：2px；变换：比例（0.5）；左：0；右：0；顶部：5px；宽度：自动！重要；}.product-show.el-checkbox__inner{显示：块！重要；}.product-show.el-checkbox{显示：块！重要；}
