Как сортировать в таблице вложенные уровни?

Question

[bobandmermaid]

Добрый день!
Есть таблица из библиотеки для Vue - element-ui.
Она сортирует только верхние уровни.
Мне нужно, что бы она сортировала и вложенные уровни, помогите плиз.
И именно эта библиотека нужна))

По дефолту с бэка сортирует sortable.

https://codepen.io/bomermaid/pen/NWRVKbO

Answer 1

[Валерий Воронков]

Вы, конечно же, добавляли свойство default-sort для таблички?И оно не помогло? Если так - то вам придется самому подготавливать сортировку ДО передеачи данных в табличку.

Comments

[bobandmermaid]

Да default-sort пробовал. Но возможно я неправильно вопрос поставил или вас не понял. Надо что бы сортировалось по клику на стрелки. Верхний уровень сортирует, а нижний не хочет.

Данные в таблицу вношу через модальное окно.

Код с таблицей:

<template>
  <el-table
    :data='tableData'
    :tree-props='{children: "children", hasChildren: "hasChildren"}'
    :default-sort="{prop: 'date', order: 'ascending'}"
    style='width: 100%;'
    row-key="id"
    border
    default-expand-all>
    <el-table-column
      prop='name'
      label='Имя'
      sortable>
    </el-table-column>
    <el-table-column
      prop='phone'
      label='Телефон'
      width='250px'
      sortable>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'UsersList',
  props: {
    tableData: {
      type: Array,
      default: () => {},
    },
  },
};
</script>

А вот непосредственно запись данных в таблицу:

<template>
  <div class='table'>
    <user-popup
      :tableData = 'tableData'
      @addUser = 'saveUser($event)'
    />
    <users-list
      :tableData = 'tableDataChildren'
    />
  </div>
</template>

<script>
import UserPopup from './UserPopup';
import UsersList from './UsersList';

export default {
  name: 'Data',
  components: {
    'users-list': UsersList,
    'user-popup': UserPopup
  },
  data() {
    return {
      tableData: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    saveUser(data) {
      const chief = this.tableData.find(user => user.id === data.chiefId);
      const result = {
        id: this.tableData.length + 1,
        name: data.name,
        phone: data.phone,
        parentId: chief ? chief.id : null,
        level: chief ? chief.level + 1 : 1
      };

      this.tableData.push(result);
      localStorage.setItem('tableData', JSON.stringify(this.tableData));
    },
    getList() {
      this.tableData = JSON.parse(localStorage.getItem('tableData')) || [];
    },
  },
  computed: {
    tableDataChildren() {
      const tableData = this.tableData
        .map(elem => Object.assign(elem, { children: [] }))
        .sort((a, b) => (a.level < b.level ? 1 : -1));

      const res = tableData.slice();

      tableData.forEach(user => {
        res.forEach(item => {
          if (user.parentId === item.id) {
            item.children.push(user);
          }
        });
      });

      return res.filter((node) => node.level === 1);
    },
  }
};
</script>

[Валерий Воронков]

Я думаю ,что вложености ,все же, они не могут сортировать. Вложености нужно подготавливать сами. Я это имел в виду.