Rumah > hujung hadapan web > tutorial js > vue怎样实现树形菜单

vue怎样实现树形菜单

php中世界最好的语言
Lepaskan: 2018-03-19 14:05:00
asal
1445 orang telah melayarinya

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!DOCTYPE html><html>

    <head>

        <meta charset="UTF-8">

        <title>vue</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="animate.css">

        <script src="vue.js"></script>

        <style>

            *{

                color:#585858;

          

            }

            #app{

                min-height:  650px;

            }

            #app li{

                list-style-type:none;

            }

            #app a{

                text-decoration:none;

            }

            #app button{

                width:100%;

            }

            #app ul{

                padding:10px;

            }

            #app span{

                cursor:pointer;

            }

            #tree{

                border: 1px solid #ccc;            

                min-height:  650px;

                width: 50%;

                margin:0;

                padding-top: 10px;

                background-color:#f2f2f2;

                position: absolute;

                top:0;

                left:0;

            }

            

            #tree  li {

                display: block;

                padding: 0;

                margin: 0;

                border: 0;

                border-bottom: 1px solid #e5e5e5;

                min-height: 32px;

                line-height:32px;

            }

        </style>

    </head>

    <body>

        <p id=&#39;app&#39; @click=&#39;hideTree($event)&#39;>

            <button  @click.stop="show = !show">点我</button>

             

            <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">

                <item v-bind:tree=&#39;treeData&#39; id=&#39;tree&#39; v-if="show"></item>  

            </transition>   

        </p>

        <template id=&#39;tree-template&#39;>

            <ul>

                <li v-for=&#39;(v,i) in tree&#39;>   

                    <span v-if="isFolder(v)" @click="toggle(i)">{{ tree[i].open ? '-' '+' }}</span>

                    <a data-id="v.id">{{v.city}}</a>    

                    <item v-bind:tree=&#39;v.child&#39; v-show="tree[i].open"></item>

                </li>

            </ul>    

        </template>

        <script>

            var data = [{"id":26,"pid":1,"city":"四川省"},{"id":30,"pid":1,"city":"云南省"},{"id":322,"pid":26,"city":"成都"},{"id":323,"pid":26,"city":"绵阳"},{"id":324,"pid":26,"city":"阿坝"},{"id":325,"pid":26,"city":"巴中"},{"id":326,"pid":26,"city":"达州"},{"id":327,"pid":26,"city":"德阳"},{"id":328,"pid":26,"city":"甘孜"},{"id":329,"pid":26,"city":"广安"},{"id":330,"pid":26,"city":"广元"},{"id":331,"pid":26,"city":"乐山"},{"id":332,"pid":26,"city":"凉山"},{"id":333,"pid":26,"city":"眉山"},{"id":334,"pid":26,"city":"南充"},{"id":335,"pid":26,"city":"内江"},{"id":336,"pid":26,"city":"攀枝花"},{"id":337,"pid":26,"city":"遂宁"},{"id":338,"pid":26,"city":"雅安"},{"id":339,"pid":26,"city":"宜宾"},{"id":340,"pid":26,"city":"资阳"},{"id":341,"pid":26,"city":"自贡"},{"id":342,"pid":26,"city":"泸州"},{"id":367,"pid":30,"city":"昆明"},{"id":378,"pid":30,"city":"曲靖"},{"id":3100,"pid":367,"city":"盘龙区"},{"id":3101,"pid":367,"city":"五华区"},{"id":3102,"pid":367,"city":"官渡区"},{"id":3103,"pid":367,"city":"西山区"},{"id":3104,"pid":367,"city":"东川区"},{"id":3105,"pid":367,"city":"安宁市"},{"id":3106,"pid":367,"city":"呈贡县"},{"id":3107,"pid":367,"city":"晋宁县"},{"id":3108,"pid":367,"city":"富民县"},{"id":3109,"pid":367,"city":"宜良县"},{"id":3110,"pid":367,"city":"嵩明县"},{"id":3111,"pid":367,"city":"石林县"},{"id":3112,"pid":367,"city":"禄劝"},{"id":3113,"pid":367,"city":"寻甸"},{"id":3189,"pid":378,"city":"麒麟区"},{"id":3190,"pid":378,"city":"宣威市"},{"id":3191,"pid":378,"city":"马龙县"},{"id":3192,"pid":378,"city":"陆良县"},{"id":3193,"pid":378,"city":"师宗县"},{"id":3194,"pid":378,"city":"罗平县"},{"id":3195,"pid":378,"city":"富源县"},{"id":3196,"pid":378,"city":"会泽县"},{"id":3197,"pid":378,"city":"沾益县"}];            var treeData = createTree({

                idname:'id',

                pidname:'pid',

                rootid:1,

                data:data

            });            function createTree(arg){                var idname = arg.idname,

                    pidname = arg.pidname,

                    rootid = arg.rootid,

                    data = arg.data,

                    treeData = [];                var _createTree = function(id){                    var ret = [];  

                    var index = 0;                    for(var i = 0; i < data.length; i++){               

                        if(data[i][pidname] == id){

                            ret[index] = data[i];

                            ret[index].child = _createTree(data[i][idname]);

                            index++;

                        

                    }                    return ret;

                }                var index = 0;                for(var i = 0; i < data.length; i++){          

                    if(data[i][pidname] == rootid){

                       treeData[index] = data[i];

                       treeData[index].child = _createTree(data[i][idname]);

                       index++;

                   }    

                }                return treeData;

            }

            Vue.component(&#39;item&#39;, {

                template: &#39;#tree-template&#39;,

                props: [&#39;tree&#39;],

                data: function () {                    return {}

                },

                methods: {

                    toggle: function (i) {                        this.tree[i].open = !this.tree[i].open;                        this.$set(this.tree, i, this.tree[i]);

                    },

                    isFolder: function (data) {                        return data.child && data.child.length

                    },

                },

            })            var vm = new Vue({

                el: &#39;#app&#39;,

                data: {

                    treeData: treeData,

                    show:false,

                },

                methods: {

                    hideTree:function(e){                        if(e.target.id == &#39;app&#39;){

                            console.log(137);                            this.show = false;

                        }

                    }

                },

                created: function () {                    function _addOpen(data) {                        for (var i = 0; i < data.length; i++) {

                            data[i][&#39;open&#39;] = false;                            if (data[i].child.length > 0) {

                                _addOpen(data[i].child);

                            }

                        }

                    }

                    _addOpen(this.treeData);

                }

            });        </script>

    </body></html>

Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

在前端中的html基础知识 

知名的网站前端布局分析

Atas ialah kandungan terperinci vue怎样实现树形菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan