有一棵树型的数据,需要实现:在外部加一个 全选和不全选的按钮,去全部勾选树结构里面每一项的选框。
当点击勾选全选的时候,树的每一项都勾选;
当取消全选的时候,树的每一项都不勾选;
当选树的其中一项时,全选按钮是半选状态;
实现效果如下:
<template><div class="app-container vehContractList"><-- 我省略了表格。这个在这里代表表格每一行的数据:scope.row --><el-button type="text" @click="handleAdd(scope.row)">配置ID</el-button><el-dialog:title="title":visible.sync="open"width="896px"append-to-body:close-on-click-modal="false"><el-formref="form":model="form":rules="rules"label-width="120px":hide-required-asterisk="false"><el-row :gutter="10"><el-col :span="16"><span style="position: absolute; left: 65px; top: 59px;font-size: 14px;color: #ff6d6d; margin-right: 4px;">*</span><el-form-itemlabel="选择树ID"><!-- prop="itemIds" --><el-row class="elRowCount"><el-col :span="12"><el-checkboxv-model="checkAll":indeterminate="isIndeternimate"@change="handleCheckAll">全选/全不选</el-checkbox></el-col></el-row><el-row class="elRowTree"><el-treeref="itemTree"v-loading="loading4":data="itemTreeData":filter-node-method="filterNode"show-checkboxnode-key="id"default-expand-all:props="defaultProps":default-checked-keys="checkDefaultForItem":expand-on-click-node="false"class="customDisableTree"@check="handleNodeClickForItem"/></el-row><div v-if="noCheck" class="el-form-item__error">请选择</div></el-form-item></el-col></el-row></el-form><divslot="footer"class="dialog-footer"><el-buttontype="primary"@click="submitForm">保 存</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog&