Quasar - популярная библиотека пользовательского интерфейса Vue для разработки красивых приложений Vue.

В этой статье мы рассмотрим, как создавать приложения Vue с помощью библиотеки Quasar UI.

Режим аккордеонного дерева

Мы можем показать дерево в виде гармошки с опорой accordion:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-tree
        :nodes="data"
        node-key="label"
        selected-color="primary"
        :selected.sync="selected"
        default-expand-all
        accordion
      >
      </q-tree>
    </div>
    <script>
      const data = [
        {
          label: "Hotel",
          children: [
            {
              label: "Food",
              icon: "restaurant_menu"
            },
            {
              label: "Room service",
              icon: "room_service"
            },
            {
              label: "Room view",
              icon: "photo"
            }
          ]
        }
      ];
      new Vue({
        el: "#q-app",
        data: {
          data,
          splitterModel: 50,
          selected: "Food"
        }
      });
    </script>
  </body>
</html>

Узлы дерева фильтров

Мы можем добавить фильтр, чтобы пользователи могли искать узлы дерева.

Например, мы можем написать:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-input ref="filter" filled v-model="filter" label="Filter">
        <template v-slot:append>
          <q-icon
            v-if="filter !== ''"
            name="clear"
            class="cursor-pointer"
            @click="resetFilter"
          >
          </q-icon>
        </template>
      </q-input>
      <q-tree
        :nodes="data"
        node-key="label"
        :filter="filter"
        default-expand-all
      >
      </q-tree>
    </div>
    <script>
      const data = [
        {
          label: "Hotel",
          children: [
            {
              label: "Food",
              icon: "restaurant_menu"
            },
            {
              label: "Room service",
              icon: "room_service"
            },
            {
              label: "Room view",
              icon: "photo"
            }
          ]
        }
      ];
      new Vue({
        el: "#q-app",
        data: {
          data,
          filter: ""
        },
        methods: {
          resetFilter() {
            this.filter = "";
            this.$refs.filter.focus();
          }
        }
      });
    </script>
  </body>
</html>

Мы добавляем q-input, привязанный к реактивному свойству filter.

Затем мы передаем реактивное свойство filter в качестве значения filter prop компонента q-tree.

Это позволит нам искать узлы при вводе текста в поле ввода.

Выбираемые узлы

Мы можем установить узлы как выбранные, установив в качестве значения реактивное свойство, привязанное к q-tree.

Например, мы можем написать:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <div>
        <div class="q-gutter-sm">
          <q-btn
            size="sm"
            color="primary"
            @click="selectRoomService"
            label="Select Room service"
          >
          </q-btn>
          <q-btn
            v-if="selected"
            size="sm"
            color="red"
            @click="unselectNode"
            label="Unselect node"
          >
          </q-btn>
        </div>
      </div>
      <q-tree
        :nodes="data"
        default-expand-all
        :selected.sync="selected"
        node-key="label"
      >
      </q-tree>
    </div>
    <script>
      const data = [
        {
          label: "Hotel",
          children: [
            {
              label: "Food",
              icon: "restaurant_menu"
            },
            {
              label: "Room service",
              icon: "room_service"
            },
            {
              label: "Room view",
              icon: "photo"
            }
          ]
        }
      ];
      new Vue({
        el: "#q-app",
        data: {
          data,
          selected: ""
        },
        methods: {
          selectRoomService() {
            if (this.selected !== "Room service") {
              this.selected = "Room service";
            }
          },
          unselectNode() {
            this.selected = null;
          }
        }
      });
    </script>
  </body>
</html>

В методе selectRoomService мы устанавливаем this.selected на 'Room service'.

И поскольку this.selected привязан к q-tree с v-model, узел будет выбран.

И если мы установим его в null, как мы это делали в unselectNode, узел не будет выбран.

Заключение

Мы можем настроить компонент дерева Quasar и добавить к нему функции фильтрации и выбора.