[vue.js] 树形结点多选框选择
·
vue.js前端代码:
<template>
<div>
<el-tree
:data="treeData"
node-key="id"
show-checkbox
ref="tree"
@check-change="handleCheckChange"
/>
<el-button @click="getSelectedNodes">获取选中的节点</el-button>
<el-button @click="getSelectedLabels">获取选中的标签</el-button>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '一级节点',
children: [
{ id: 2, label: '二级节点1' },
{ id: 3, label: '二级节点2' }
]
},
{
id: 4,
label: '一级节点',
children: [
{ id: 5, label: '二级节点1' },
{ id: 6, label: '二级节点2' }
]
}
],
selectedNodes: [],
selectedLabels: []
};
},
methods: {
handleCheckChange(node, checked) {
console.log('节点:', node, '选中状态:', checked);
},
getSelectedNodes() {
const checkedNodes = this.$refs.tree.getCheckedNodes(false, true); // 只返回完全选中的节点
this.selectedNodes = checkedNodes;
console.log('选中的节点:', checkedNodes);
},
getSelectedLabels() {
const checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
const labels = checkedNodes.map(node => node.label);
this.selectedLabels = labels;
console.log('选中的标签:', labels);
}
}
};
</script>
运行的界面:
点击获取选中的节点:
点击“获取选择的标签”:
更多推荐



所有评论(0)