图书列表根据后端返回的list 来处理数据, 页面超过高度自动换列, 而不是超过整块换行
<template>
<div class="box">
<div
v-for="(v,i) in emptyArr"
:key="i"
:class="[v.sectionName ? 'item': 'son-item']"
>
<div>{{v.sectionName || v.experimentName}}</div>
</div>
</div>
</template>
<script>
export default {
name: "Test1",
props: {},
data() {
return {
testData: [],
emptyArr: [],
};
},
components: {},
computed: {},
watch: {},
created() {
this.testData = {
"id": 1,
"name": "基础有机化学 刑其毅（第四版）",
"children": [
{
"id": 1,
"sectionName": "第一章",
"children": []
},
{
"id": 2,
"sectionName": "第二章",
"children": []
},
{
"id": 3,
"sectionName": "第三章",
"children": [
{
"id": 135,
"experimentName": "一级醇和卤化磷反应（7.7.2）"
},
{
"id": 141,
"experimentName": "邻二醇的重排反应——频哪醇的重排"
},
{
"id": 142,
"experimentName": "格氏试剂与环氧乙烷化合物制备醇（羰基的还原反应-7.13.4）"
},
{
"id": 143,
"experimentName": "格氏试剂和羧酸衍生物的反应（7.13.4）"
},
{
"id": 144,
"experimentName": "格氏试剂与酰卤反应（7.13.4）"
},
{
"id": 147,
"experimentName": "1,2-环氧乙烷与乙硼烷反应（7-21-1）"
},
]
},
{
"id": 4,
"sectionName": "第四章",
"children": []
},
{
"id": 5,
"sectionName": "第五章",
"children": []
},
{
"id": 6,
"sectionName": "第六章",
"children": [
{
"id": 131,
"experimentName": "E2消除反应"
},
{
"id": 132,
"experimentName": "成环的SN2反应-6.6.3"
},
{
"id": 133,
"experimentName": "邻二卤代烷失卤原子 E1cb反应"
},
{
"id": 237,
"experimentName": "试一下排序"
}
]
},
{
"id": 7,
"sectionName": "第七章",
"children": [
{
"id": 135,
"experimentName": "一级醇和卤化磷反应（7.7.2）"
},
{
"id": 141,
"experimentName": "邻二醇的重排反应——频哪醇的重排"
},
{
"id": 142,
"experimentName": "格氏试剂与环氧乙烷化合物制备醇（羰基的还原反应-7.13.4）"
},
{
"id": 143,
"experimentName": "格氏试剂和羧酸衍生物的反应（7.13.4）"
},
{
"id": 144,
"experimentName": "格氏试剂与酰卤反应（7.13.4）"
},
{
"id": 147,
"experimentName": "1,2-环氧乙烷与乙硼烷反应（7-21-1）"
},
]
},
]
}
this.transformData(this.testData.children)
},
mounted() { },
methods: {
transformData(arr) {
arr.forEach(v => {
if (v.sectionName) {
let obj = {
sectionName: v.sectionName
}
this.emptyArr.push(obj)
}
if (v.experimentName) {
let obj = {
experimentName: v.experimentName
}
this.emptyArr.push(obj)
}
if (v.children && v.children.length > 0) {
this.transformData(v.children, this.emptyArr)
}
})
}
}
}
</script>
<style scoped lang='scss'>
.box {
height: 30vh;
display: flex;
width: 100%;
flex-direction: column;
flex-wrap: wrap;
overflow-x: scroll;
}
.item {
width: 400px;
font-size: 26px;
padding: 20px 0;
// flex-direction: column;
// flex-wrap: wrap;
}
.son-item {
font-size: 20px;
margin-left: 50px;
padding: 10px 0;
}
</style>
