如何禁用 el-tree 的复选框功能,只保留单选?
时间: 2024-09-28 07:04:54 浏览: 47
el-tree-select:基于el-select和el-tree改造的树形选择器(下拉框)组件
要在Element UI的el-tree组件中禁用默认的多选模式并启用单选,你可以设置`check-strictly`属性为`true`。这会限制用户只能选择一个节点,而不能同时选择多个。另外,如果需要禁用所有节点的复选框,可以将每个节点的`default-checked`属性设置为`false`。
这是一个示例配置:
```html
<el-tree
:data="treeData"
:props="treeProps"
:check-strictly="true"
default-expand-all
node-key="id"
@node-click="handleNodeClick">
<span slot-scope="{ node }">
<input type="checkbox" v-model="node.checked" :disabled="!node.indeterminate">
{{ node.label }}
</span>
</el-tree>
<script>
export default {
data() {
return {
treeData: ...,
treeProps: {
children: 'children',
label: 'label',
indeterminate: '__indeterminate'
},
// 如果你需要禁用所有默认选中,可以在数据加载完成后再操作
initTreeData() {
this.treeData.forEach(node => {
node.defaultChecked = false;
});
}
};
},
methods: {
handleNodeClick(node) {
// 根据需求处理点击事件,比如取消其他节点的选择
if (!node.indeterminate) {
this.$refs.tree.setCheckedNodes([]);
this.$refs.tree.setChecked([node]);
}
}
},
mounted() {
this.initTreeData();
}
};
</script>
```
阅读全文