### element-ui el-tree 设置
默认选中节点的方法及属性配置
`el-tree` 是 Element UI 中用于展示树形结构数据的组件。为了实现
默认选中某个节点的功能，可以通过 `default-checked-keys` 和 `setCurrentKey` 或者 `setCurrentNode` 属性来完成。
####
默认勾选节点
如果希望某些节点被
默认勾选，则可以使用 `default-checked-keys` 属性。该属性接收一个数组，其中包含需要
默认勾选的节点对应的 `node-key`
值[^1]。
以下是具体代码示例：
```
html
<template>
<div>
<el-tree
:data="roledata"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
:default-checked-keys="choosedRole">
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
roledata: [
{ id: 1, label: 'Parent Node', children: [{ id: 2, label: 'Child Node' }] },
],
defaultProps: {
children: 'children',
label: 'label'
},
choosedRole: [2], // 需要
默认勾选的节点 ID 数组
};
}
};
</script>
```
上述代码通过绑定 `default-checked-keys` 到 `choosedRole` 数据字段实现了
默认勾选功能。
---
#### 设置当前高亮显示的节点
对于单选模式下的
默认选中需求，可利用 `current-node-key` 属性或者调用方法手动设置当前
选中的节点。`current-node-key` 的
值应与 `node-key` 对应一致[^2]。
下面是一个例子：
```
html
<template>
<div>
<el-tree
:data="pdfTree"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
:current-node-key="currentLivingId"
default-expand-all>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
pdfTree: [
{ id: 101, label: 'Root Node', children: [{ id: 102, label: 'Sub Node' }] },
],
currentLivingId: 102, // 当前
默认选中的节点 key
};
},
methods: {
handleNodeClick(data) {
console.log('Selected Node:', data);
}
}
};
</script>
```
在此案例中，`current-node-key` 被赋
值为 `currentLivingId`，从而让指定的节点成为初始状态下的
选中项。
---
#### 动态修改
默认选中状态
除了静态定义外，在实际开发过程中可能还需要动态调整
默认选中情况。这可通过编程方式操作实例对象达成目标。比如借助 `$refs.tree.setCheckedKeys()` 方法重新设定已勾选项列表；而切换到特定单一节点则依赖于 `.setCurrentKey()` 函数^[]。
示例代码如下所示：
```javascript
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys([3]); // 更新多选框的状态至新集合
});
// 单独选定某一项
this.$refs.tree.setCurrentKey(4); // 将第四个作为新的激活条目
```
以上脚本片段展示了如何在 Vue 生命周期钩子内部延迟执行逻辑以便正确初始化视图层面上的选择效果.
---
### 修改最底层节点样式
针对自定义样式的场景，推荐采用 scoped CSS 结合模板渲染机制解决个性化表现的需求。例如，当仅需更改叶子级单元格外观时，可以在 `<style>`
标签里编写专属规则并附加条件判断语句:
```css
<style scoped>
.custom-leaf-style .is-leaf {
color: red;
}
</style>
```
配合 JavaScript 实现更灵活控制:
```javascript
renderContent(h, { node }) {
const isLeaf = !node.childNodes || node.childNodes.length === 0;
let className = '';
if (isLeaf) {
className += 'custom-leaf-style';
}
return h(
'span',
{ class: className },
`${node.label}`
);
},
```
最终将此函数映射回 Tree 组件上即可生效。
---
扫一扫
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
