复选框单选
<el-tree check-strictly show-checkbox :data="trreData" @check="checkClick" :props="defaultProps"
node-key="id" current-node-key :accordion="true" ref="tree" ></el-tree>
//需要 node-key="id" ref="tree"
// 单选
checkClick (data, checked) {
// // 单选
if (checked) {
this.$refs.tree.setCheckedNodes([]);
this.$refs.tree.setCheckedNodes([data]);
//交叉点击节点
} else {
this.$refs.tree.setCheckedNodes([]);
//点击已经选中的节点,置空
}
},
在这里插入图片描述 (https://img-blog.csdnimg.cn/20210629143657989.png)
添加“全部按钮” 全选
<div class="trreShow" >
<el-checkbox v-model="checkAll" @change="checkAllChange" style="margin-left:10px">全选</el-checkbox>
<el-tree class="filter-tree" :data="data" :filter-node-method="filterNode" node-key="id" ref="data" show-checkbox :props="defaultProps" ></el-tree>
//需要 node-key="id" // ref="data"
</div>
// 全选
checkAllChange (val) {
if (this.checkAll) {
this.$refs.data.setCheckedNodes(this.data);
} else {
this.$refs.data.setCheckedKeys([]);
}
},