获取el-tree选择框的值
时间: 2023-07-26 08:46:57 浏览: 37
获取 `el-tree` 中所有选中节点的值可以通过以下步骤实现:
1. 使用 `ref` 属性指定 `el-tree` 组件的引用名称,例如:`<el-tree ref="myTree"></el-tree>`
2. 在需要获取选中节点值的方法中,通过 `this.$refs.myTree.getCheckedNodes()` 方法获取所有选中节点的数组。
3. 遍历选中节点数组,获取每个节点的值,例如:`checkedNodes.map(node => node.id)` 即可获取所有选中节点的 id 值。
示例代码如下:
```html
<template>
<div>
<el-tree ref="myTree" :data="treeData" :props="treeProps" show-checkbox></el-tree>
<el-button type="primary" @click="getCheckedValues">获取选中值</el-button>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '一级 1',
children: [
{
id: 11,
label: '二级 1-1'
},
{
id: 12,
label: '二级 1-2'
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 21,
label: '二级 2-1'
},
{
id: 22,
label: '二级 2-2'
}
]
}
],
treeProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
getCheckedValues() {
const checkedNodes = this.$refs.myTree.getCheckedNodes()
const checkedValues = checkedNodes.map(node => node.id)
console.log(checkedValues)
}
}
}
</script>
```