Vue 递归组件

发表于 | 分类于 |

参考内容

真的是庆幸当初傻乎乎的在记笔记，喏~ 全用上了~
虽然记录的很乱，但还是记录下来的好，虽然它会浪费你很多的时间。
当然我也有很多没有记录的，“自我反省” o(╥﹏╥)o

案例

在这里插入图片描述

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--https://www.bootcdn.cn/jquery/-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <details>
        <summary style="background: deepskyblue">详情解释1</summary>

        <ul>
            <li v-for="filterVO in filterVOList">
                <ccccccccc :vo="filterVO"></ccccccccc>
            </li>
        </ul>

    </details>
    <h1 @click="cancel">{{name}}，你好~！</h1>
    <pre>{{filterVOList}}，你好~！</pre>



</div>

</body>

<script>

    //1、全局声明注册一个组件
    Vue.component("ccccccccc", {
        template: `
            <div>
                <span>
                    日期：{{vo.timeStr}} <span v-if="vo.cycle==='DAY'">{{vo.dayOfWeek}}</span>，
                    总计：{{vo.money}}，
                    描述：{{vo.description}}
                </span>
                <ol v-if="vo.cycle==='DAY'">
                    <li v-for="sub in vo.subList">
                        <span>金额：{{sub.money}}，标签：{{sub.tagNames}}，描述：{{sub.description}}</span>
                    </li>
                </ol>
                <ul v-if="vo.cycle==='YEAR'||vo.cycle==='MONTH'||vo.cycle==='WEEK'">
                    <li v-for="sub in vo.subList">
                        <ccccccccc :vo="sub"></ccccccccc>
                    </li>
                </ul>
            </div>
        `,
        props: ["vo"]
    });

    let vm = new Vue({
        el: '#app',
        data: {
            name: '大牛',
            filterVOList:
                [
                    {
                        "id": 5,
                        "userId": 1,
                        "statsDate": "2021-01-01 00:00:00",
                        "dayOfWeek": null,
                        "cycle": "YEAR",
                        "money": 43.69,
                        "description": "默认描述",
                        "createTime": "2021-12-20 07:00:29",
                        "updateTime": "2021-12-20 07:00:29",
                        "tagNames": "[]",
                        "subList": [
                            {
                                "id": 4,
                                "userId": 1,
                                "statsDate": "2021-12-01 00:00:00",
                                "dayOfWeek": null,
                                "cycle": "MONTH",
                                "money": 43.69,
                                "description": "默认描述",
                                "createTime": "2021-12-20 07:00:29",
                                "updateTime": "2021-12-20 07:00:29",
                                "tagNames": "[]",
                                "subList": [
                                    {
                                        "id": 2,
                                        "userId": 1,
                                        "statsDate": "2021-12-13 00:00:00",
                                        "dayOfWeek": "周一",
                                        "cycle": "DAY",
                                        "money": 3.00,
                                        "description": "默认描述",
                                        "createTime": "2021-12-20 07:00:29",
                                        "updateTime": "2021-12-20 07:00:29",
                                        "tagNames": "[]",
                                        "subList": [
                                            {
                                                "id": 1,
                                                "userId": 1,
                                                "statsDate": "2021-12-13 00:00:00",
                                                "dayOfWeek": null,
                                                "cycle": "RECORD",
                                                "money": 3.00,
                                                "description": "[买本子]",
                                                "createTime": "2021-12-20 07:00:29",
                                                "updateTime": "2021-12-20 07:00:29",
                                                "tagNames": "[买本子]",
                                                "subList": [],
                                                "timeStr": "2021-12-13"
                                            }
                                        ],
                                        "timeStr": "2021-12-13"
                                    },
                                    {
                                        "id": 7,
                                        "userId": 1,
                                        "statsDate": "2021-12-17 00:00:00",
                                        "dayOfWeek": "周五",
                                        "cycle": "DAY",
                                        "money": 8.80,
                                        "description": "默认描述",
                                        "createTime": "2021-12-20 07:00:45",
                                        "updateTime": "2021-12-20 07:00:45",
                                        "tagNames": "[]",
                                        "subList": [
                                            {
                                                "id": 6,
                                                "userId": 1,
                                                "statsDate": "2021-12-17 00:00:00",
                                                "dayOfWeek": null,
                                                "cycle": "RECORD",
                                                "money": 6.60,
                                                "description": "[买笔]",
                                                "createTime": "2021-12-20 07:00:45",
                                                "updateTime": "2021-12-20 07:00:45",
                                                "tagNames": "[买笔]",
                                                "subList": [],
                                                "timeStr": "2021-12-17"
                                            },
                                            {
                                                "id": 8,
                                                "userId": 1,
                                                "statsDate": "2021-12-17 00:00:00",
                                                "dayOfWeek": null,
                                                "cycle": "RECORD",
                                                "money": 2.20,
                                                "description": "[买笔]",
                                                "createTime": "2021-12-20 07:00:51",
                                                "updateTime": "2021-12-20 07:00:51",
                                                "tagNames": "[买笔]",
                                                "subList": [],
                                                "timeStr": "2021-12-17"
                                            }
                                        ],
                                        "timeStr": "2021-12-17"
                                    },
                                    {
                                        "id": 10,
                                        "userId": 1,
                                        "statsDate": "2021-12-20 00:00:00",
                                        "dayOfWeek": "周一",
                                        "cycle": "DAY",
                                        "money": 31.89,
                                        "description": "默认描述",
                                        "createTime": "2021-12-20 07:01:23",
                                        "updateTime": "2021-12-20 07:01:23",
                                        "tagNames": "[]",
                                        "subList": [
                                            {
                                                "id": 9,
                                                "userId": 1,
                                                "statsDate": "2021-12-20 00:00:00",
                                                "dayOfWeek": null,
                                                "cycle": "RECORD",
                                                "money": 31.89,
                                                "description": "[午饭]",
                                                "createTime": "2021-12-20 07:01:23",
                                                "updateTime": "2021-12-20 07:01:23",
                                                "tagNames": "[午饭]",
                                                "subList": [],
                                                "timeStr": "2021-12-20"
                                            }
                                        ],
                                        "timeStr": "2021-12-20"
                                    }
                                ],
                                "timeStr": "2021-12"
                            }
                        ],
                        "timeStr": "2021"
                    }
                ]
        },
        methods: {
            cancel() {
                // this.name="123";
                // axios.get('test/hello').then(function ({data}) {// 结构表达式
                //     alert(data)
                // });
                let params = {
                    cycle: "DAY"
                }
                axios.post('/bill_record/filter', params).then(({data}) => {
                    // alert(data.data)
                    this.filterVOList = data.data;
                });
            }
        }
    });
</script>
</html>

坑

在这里插入图片描述

最后

2021-12-28 15:41:27
附上一个现在的页面代码（这个不是案例，需要改造才能使用！！！）：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--https://www.bootcdn.cn/jquery/-->
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <script src="/js/jquery.js"></script>
    <!-- CSS -->
    <!--<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>-->
    <script src="/js/bootstrap.min.js"></script>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>-->
    <script src="/js/axios.js"></script>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>-->
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>-->
    <script src="/js/vue.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <h1 @click="cancel">{{name}}，你好~！</h1>
    <hr/>

    <select v-model="cycle" name="cycle">
        <option value="">---请选择---</option>
        <option value="DAY">日</option>
        <option value="WEEK">周</option>
        <option value="MONTH">月</option>
        <option value="YEAR">年</option>
    </select>

    <hr/>

    <button id="all_open" @click="all_open">全部展开</button>
    <button id="all_close" @click="all_close">全部关闭</button>

    <hr/>

    <div style="border: 1px solid black">
        <div v-if="filterVOList.length===0">暂无数据~</div>
        <ccccccccc :list="filterVOList" v-else></ccccccccc>
    </div>

    <hr/>

    <pre>{{filterVOList}}</pre>
</div>

</body>

<script>

    //1、全局声明注册一个组件
    Vue.component("ccccccccc", {
        template: `
            <ul class="list-group">
                <li v-for="filterVO in list" class="list-group-item">
                    <details >
                        <summary style="background: beige">
                            <span>
                                {{filterVO.cycleChinese}}：{{filterVO.timeStr}} <span
                                    v-if="filterVO.cycle==='DAY'">{{filterVO.dayOfWeek}}</span>，
                                总计：{{filterVO.money}}，
                                描述：{{filterVO.description}}
                            </span>
                        </summary>
                        <ol v-if="filterVO.cycle==='DAY'">
                            <li v-for="sub in filterVO.subList">
                                <span>金额：{{sub.money}}，标签：{{sub.tagNames}}，描述：{{sub.description}}</span>
                            </li>
                        </ol>
                        <ccccccccc :list="filterVO.subList" v-if="filterVO.cycle==='YEAR'||filterVO.cycle==='MONTH'||filterVO.cycle==='WEEK'"></ccccccccc>
                    </details>
                </li>
            </ul>
        `,
        props: ["list"]
    });

    let vm = new Vue({
        el: '#app',
        data: {
            name: '二狗',
            cycle: "",
            filterVOList: []
        },
        methods: {
            all_open() {
                $("details").attr("open", "open")
            },
            all_close() {
                $("details").removeAttr("open")
            },
            cancel() {
                // this.name="123";
                // axios.get('test/hello').then(function ({data}) {// 结构表达式
                //     alert(data)
                // });
            }
        },
        watch: {
            cycle(newVal, oldVal) {
                console.log("监听器：newVal = [%s], oldVal = [%s]", newVal, oldVal);

                if (newVal === '') {
                    this.filterVOList = [];
                    return;
                }

                let params = {
                    cycle: newVal
                }
                axios.post('/bill_record/filter', params).then(({data}) => {
                    // alert(data.data)
                    this.filterVOList = data.data;
                });
            }
        }
    });
</script>
</html>