记录一下日常小知识点^o^!
el-tree只可选中tree的一项,呈单选状态,和默认选中以及高亮一项。其实很简单哈哈简单记录一笔,直接上代码,开饭!。
- html
<el-tree
:data="menuTreeList"
:props="defaultProps"
ref="treeRef"
check-strictly
check-on-click-node
node-key="id"
:highlight-current="true"
default-expand-all
show-checkbox
@check="handleCheckChange"
></el-tree>
- js
mounted() {
// 2s后 默认 勾选中和高亮 一个节点
this.$nextTick(() => {
setTimeout(() => {
this.$refs.treeRef.setCurrentKey("114");
this.$refs.treeRef.setCheckedKeys(["114"]);
}, 2000);
});
},
methods: {
handleCheckChange(data, checkedList) {
console.log(data, checkedList);
this.$refs.treeRef.setCurrentKey(data.id);
this.$refs.treeRef.setCheckedKeys([data.id]);
},
},
- css
/* 隐藏父级节点选框 */
.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
display: none;
}