Как сделать так чтобы в value компонента TreeSelect от ElementPlus попадали все выделенные элементы, а не только корневой?

Question

[Daniil161rus]

В проекте использую ui компонент TreeSelect от Element+ (https://element-plus.org/en-US/component/tree-sele...)
Нужно сделать так чтобы при нажатии на checkbox какого-либо уровня, в value попадал он и выше стоящие элементы дерева (и выделялись), как на примерах ниже


На данный момент получается сделать только, чтобы выделялся самый нижний элемент, либо если использовать check-strictly, то нужно выделять все элементы

Answer 1

[0xD34F]

Раз подобный режим работы не предусмотрен, придётся закостылить.

Устанавливаем наблюдение за массивом выбранных значений, ищем добавленное значение, рекурсивно обходим дерево с данными в поисках соответствующего элемента, запоминая значения предков, обновляем массив выбранных значений - к тем, что там уже есть добавляем предков добавленного значения:

watch(values, (newValues, oldValues) => {
  const addedValue = newValues.find(n => !oldValues.includes(n));
  if (addedValue) {
    const findAncestorValues = (arr, val, values = []) =>
      (Array.isArray(arr) ? arr : []).reduce((found, n) => {
        if (!found) {
          values.push(n.value);
          found = n.value === val ? [...values] : findAncestorValues(n.children, val, values);
          values.pop();
        }
        return found;
      }, null);

    values.value = [...new Set([ ...values.value, ...findAncestorValues(data, addedValue) ])];
  }
});

Если нежелательно реагировать на какие-либо иные изменения массива выбранных значений, кроме тех, что обусловлены действиями пользователя, то тогда вместо использования watch необходимо слушать у el-tree-select событие обновления массива выбранных значений. При этом, чтобы иметь доступ к предыдущей версии этого массива, надо будет немного поработать руками. Как-то так:

const oldValues = ref([]);

function onUpdate() {
  const addedValue = values.value.find(n => !oldValues.value.includes(n));
  if (addedValue) {
    // тут всё по-прежнему
  }

  oldValues.value = values.value;
}

<el-tree-select
  @update:modelValue="onUpdate"
  ...

Comments

[Daniil161rus]

Спасибо вам огромное