87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<template>
|
||
<v-card class="mx-auto">
|
||
<v-sheet class="pa-3 primary lighten-2">
|
||
<v-text-field
|
||
v-model="search"
|
||
label="Поиск по названию главы"
|
||
dark
|
||
flat
|
||
solo-inverted
|
||
hide-details
|
||
clearable
|
||
clear-icon="mdi-close-circle-outline"
|
||
>
|
||
</v-text-field>
|
||
<v-checkbox
|
||
v-model="caseSensitive"
|
||
dark
|
||
hide-details
|
||
label="С учётом регистра"
|
||
>
|
||
</v-checkbox>
|
||
</v-sheet>
|
||
<v-card-text>
|
||
<v-treeview
|
||
:active.sync="active"
|
||
:filter="filter"
|
||
:items="items"
|
||
:open.sync="open"
|
||
:search="search"
|
||
activatable
|
||
active-class="primary--text"
|
||
open-on-click
|
||
>
|
||
<template v-slot:prepend="{ item }">
|
||
<v-icon
|
||
v-if="item.children"
|
||
v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
|
||
>
|
||
</v-icon>
|
||
</template>
|
||
</v-treeview>
|
||
</v-card-text>
|
||
</v-card>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data: () => ({
|
||
active: [],
|
||
items: [],
|
||
open: [1],
|
||
search: null,
|
||
caseSensitive: false
|
||
}),
|
||
|
||
mounted () {
|
||
},
|
||
|
||
computed: {
|
||
filter () {
|
||
return this.caseSensitive
|
||
? (item, search, textKey) => item[textKey].indexOf(search) > -1
|
||
: undefined
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
},
|
||
|
||
watch: {
|
||
active (val) {
|
||
//if (val.length) alert("-" + val + "-");
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* Стили для того чтобы текст не вылезал за границы блока */
|
||
.v-treeview-node__content, .v-treeview-node__label {
|
||
flex-shrink: 1;
|
||
}
|
||
.v-treeview-node__root {
|
||
height: auto;
|
||
}
|
||
</style>
|