怎样获得element的tree组件所有选中的lable值
时间: 2024-02-23 07:58:43 浏览: 28
要获取 `element-ui` 中 `el-tree` 组件中选中的所有 label 值,可以使用以下代码:
```html
<template>
<el-tree :data="data" :props="defaultProps" show-checkbox node-key="id" @check-change="handleCheckChange" />
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: 'Option 1',
children: [
{ id: 2, label: 'Option 1-1' },
{ id: 3, label: 'Option 1-2' },
],
},
{
id: 4,
label: 'Option 2',
children: [
{ id: 5, label: 'Option 2-1' },
{ id: 6, label: 'Option 2-2' },
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
};
},
methods: {
handleCheckChange(checkedNodes) {
const selectedLabels = checkedNodes.map(node => node.label);
console.log(selectedLabels);
},
},
};
</script>
```
在上述代码中,我们定义了一个 `handleCheckChange` 方法来处理选中的值。在该方法中,我们将选中的所有节点的 label 值存储在一个新数组 `selectedLabels` 中,并通过 `console.log` 输出。其中,`checkedNodes` 是 `@check-change` 事件触发时传递的所有选中节点的数组,通过 `.map` 方法可以将其转换为一个新的数组,该数组只包含选中节点的 label 值。需要注意的是,`el-tree` 组件需要设置 `node-key` 属性来指定节点的唯一标识,这里我们使用 `id` 属性作为节点的标识。