SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы

Список вопросов Печать

Прохождение дерева через стек


Метки: vue.js javascript 

Есть массив-дерево с данными. Этот массив нужно преобразовать в таблицую. Главное, чтобы таблица не ехала.

Ответы

RemiZOffAlex  Создано: 2018-09-02 00:58:48.765273  Обновлено: 2018-09-02 00:58:48.765273

Прохождение дерева при помощи стека

<section id="app">

<table class="table">
<tr v-for="item in rows">
<td>{{ item.product.id }}</td>
<td>{{ item.product.article }}</td>
</tr>
</table>

</section>

<script type="text/javascript">

var app = new Vue({
    el: '#app',
    data: {
        tree: [
            {
                id: 1,
                product_id: 1,
                product: {
                    product_id: 1,
                    article: "Д001",
                    id: 2,
                },
                children: [
                    {
                        id: 4,
                        product_id: 37,
                        product: {
                            product_id: 37,
                            article: "шнурок красный d_001",
                            id: 2
                        },
                        children: [ 
                            { 
                                id: 5, 
                                product_id: 36, 
                                product: { 
                                    product_id: 36, 
                                    article: "Моё правило", 
                                    id: '', 
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    },
    computed: {
        rows: function () {
            // Прохождение дерева через стек
            var vm = this;
            var stack=new Array();
            var result=new Array();
            stack.push(vm.tree[0]);
            while (stack.length>0) {
                var item = stack.pop();
                result.push(item);
                if ('children' in item) {
                    for (var j = 0; j < item.children.length; j++) {
                        stack.push(item.children[j]);
                    }
                }
            }
            return result;
        }
    },
    methods: {
    }
})
</script>

Результат

Возможно будут интересны и другие вопросы