Компонент TreeSelect из библиотеки ElementPlus позволяет выбирать элементы из древовидной структуры. По умолчанию, значение (value) компонента TreeSelect будет содержать только корневой элемент, который выбран пользователем. Однако, если вам требуется получить все выбранные элементы, а не только корневой, вам потребуется внести некоторые изменения в компонент.
Подходящим решением будет расширить компонент TreeSelect и добавить свою логику для сбора всех выбранных элементов. Вот как это можно сделать:
1. Создайте новый файл и назовите его MultipleTreeSelect.vue, где MultipleTreeSelect - это имя вашего расширенного компонента.
2. В новом файле определите ваш компонент. Используйте расширение элементом TreeSelect и наследуйтесь от него. Вот пример кода:
<template>
<el-tree-select v-model="selectedValues" :props="props" @change="handleChange"></el-tree-select>
</template>
<script>
import { ElTreeSelect } from 'element-plus'
export default {
extends: ElTreeSelect,
computed: {
selectedValues: {
get() {
return this.selected.map(node => node[this.nodeKey])
},
set(val) {
this.selected = this.getNodeByKey(val)
}
}
},
methods: {
handleChange(value) {
this.$emit('change', value)
},
getNodeByKey(key) {
const nodes = [...this.treeData]
while (nodes.length > 0) {
const node = nodes.shift()
if (node[this.nodeKey] === key) {
return node
}
if (node.children) {
nodes.push(...node.children)
}
}
return []
}
}
}
</script>
3. В этом коде мы создаем компонент MultipleTreeSelect, который расширяет компонент ElTreeSelect из ElementPlus. Мы также определяем вычисляемое свойство selectedValues, которое будет выполнять сбор всех выбранных значений. При изменении значения в selectedValues, будет выполнен метод set, который будет обновлять массив selected (в котором хранятся выбранные элементы компонента TreeSelect). При изменении значения в selected, будет выполнен метод getNodeByKey, который вернет выбранный узел дерева по ключу, переданному в selectedValues.
4. В компоненте MultipleTreeSelect мы добавляем слушатель события change, чтобы оповещать родительский компонент о выбранных значениях. Если вам нужно обновить состояние выбранных элементов на родительском компоненте, вы можете передавать значение через событие change.
5. Чтобы использовать ваш новый расширенный компонент MultipleTreeSelect вместо стандартного компонента TreeSelect, просто импортируйте его и используйте в своих шаблонах. Например:
<template>
<multiple-tree-select v-model="selectedValues" :tree-data="treeData"></multiple-tree-select>
</template>
<script>
import MultipleTreeSelect from './MultipleTreeSelect.vue'
export default {
components: {
MultipleTreeSelect
},
data() {
return {
selectedValues: [],
treeData: [
// Данные вашего дерева
]
}
}
}
</script>
Теперь, когда пользователь выбирает элементы в вашем компоненте MultipleTreeSelect, массив selectedValues будет содержать выбранные значения, включая все элементы, не только корневой. Вы можете использовать массив selectedValues в своем родительском компоненте для дальнейшей обработки выбранных элементов.
Вот и все! Теперь вы знаете, как расширить компонент TreeSelect из ElementPlus, чтобы получить все выбранные элементы, а не только корневой.