v-for循环展示页面结构问题

有个需求实现不了，有没有哪位牛人帮帮我，谢谢。
需求：

1.三行数据每一行都可以展开收起。
2.每展开一行数据，都可以看到一个div,div左边展示列表，右边展示折线图，点击左边列表的某一行数据，右边的折线图表就会更新。

难点：右侧折现图部分不知道如何渲染数据了。

下面是我写的demo,carTablle.vue，carTablle2.vue两种方式都有欠缺，求指导。carpng是单个折线图组件。

carTablle.vue

<template>
    <div>
        <div class="part">
            <div class="title">车辆统计</div>
        </div>
        <div v-for="(i, index) in list" :key="index" class="itemBox">
            <div class="top">
                <div class="topLeft">
                    <div class="brand">车辆品牌：{{ i.carName }}</div>
                    <div>最大输出功率：{{ i.carNumber }}KW</div>
                </div>
                <div>
                    <span @click="handleChange(i)" class="fontColor">
                        {{ i.isopen ? '收起' : '展开' }}
                    </span>
                    <span @click="open(i)">详情</span>
                </div>
            </div>
            <div class="bottom" v-show="i.isSubShow" style="">
                <!-- 左边的 -->
                <div class="bottomLeft">
                    <div
                        class="leftContent"
                        v-for="(k, q) in i.data"
                        :key="q"
                        @click="getPlateNumberList(k, i)"
                    >
                        <div>{{ q + 1 }}</div>
                        <div>{{ k.carName }}</div>
                        <div>最大输出功率：{{ k.carNumber }}KW</div>
                    </div>
                </div>
                <!-- 右边的 -->
                <div class="bottomRight" v-if="i == number">
                    <div class="text">共{{ total }}辆充电车辆</div>
                    <div class="chart">
                        <div v-for="(png, index) in pngList" :key="index" class="chartItem">
                            <car-png :items="png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import carPng from './carPng.vue'
export default {
    components: {
        carPng,
    },
    data() {
        return {
            id: 1,
            total: 0,
            number: '', //控制折线图显示隐藏
            list: [
                {
                    carName: '奔驰',
                    carNumber: '500kw',
                    isopen: false,
                    isSubShow: false,
                    data: [
                        { carName: '奔驰01', carNumber: 500 },
                        { carName: '奔驰02', carNumber: 600 },
                    ],
                },
                {
                    carName: '宝马',
                    carNumber: '500kw',
                    isopen: false,
                    isSubShow: false,
                    data: [
                        { carName: '宝马01', carNumber: 500 },
                        { carName: '宝马02', carNumber: 600 },
                    ],
                },
                {
                    carName: '玛莎拉蒂',
                    carNumber: 500,
                    isopen: false,
                    isSubShow: false,
                },
            ],
            pngList: [],
        }
    },
    methods: {
        getPlateNumberList(k, i) {
            this.number = i
            console.log('111')
            if (k.carName == '奔驰01') {
                this.total = 3
                this.pngList = [
                    {
                        plateNumber: '京123',
                        platedata: [
                            {
                                name: 'Email',
                                type: 'line',
                                stack: 'Total',
                                data: [120, 132, 101, 134, 90, 230, 210],
                            },
                            {
                                name: 'Union Ads',
                                type: 'line',
                                stack: 'Total',
                                data: [220, 182, 191, 234, 290, 330, 310],
                            },
                            {
                                name: 'Video Ads',
                                type: 'line',
                                stack: 'Total',
                                data: [150, 232, 201, 154, 190, 330, 410],
                            },
                            {
                                name: 'Direct',
                                type: 'line',
                                stack: 'Total',
                                data: [320, 332, 301, 334, 390, 330, 320],
                            },
                            {
                                name: 'Search Engine',
                                type: 'line',
                                stack: 'Total',
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                            },
                        ],
                    },
                    {
                        plateNumber: '京456',
                        platedata: [
                            {
                                name: 'Email',
                                type: 'line',
                                stack: 'Total',
                                data: [100, 100, 100, 100, 100, 100, 210],
                            },
                            {
                                name: 'Union Ads',
                                type: 'line',
                                stack: 'Total',
                                data: [220, 182, 191, 234, 290, 330, 310],
                            },
                            {
                                name: 'Video Ads',
                                type: 'line',
                                stack: 'Total',
                                data: [150, 232, 201, 154, 190, 330, 410],
                            },
                            {
                                name: 'Direct',
                                type: 'line',
                                stack: 'Total',
                                data: [320, 332, 301, 334, 390, 330, 320],
                            },
                            {
                                name: 'Search Engine',
                                type: 'line',
                                stack: 'Total',
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                            },
                        ],
                    },
                    { plateNumber: '京789' },
                    {
                        plateNumber: '京789',
                    },
                ]
            } else {
                this.total = 2
                this.pngList = []
            }
        },
        handleChange(item) {
            item.isSubShow = !item.isSubShow
            item.isopen = !item.isopen //右侧图标根据内容隐藏或显示进行相应显示
        },
        open() {
            this.$refs.carTypeDetail.show()
        },
    },
}
</script>

<style lang="less" scoped>
.part {
    height: 40px;
    background: white;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    .title {
        font-size: 18px;
    }
}
.itemBox {
    padding: 10px 20px;
    .top {
        display: flex;
        justify-content: space-between;
        .topLeft {
            display: flex;
            img {
                width: 50px;
                height: 50px;
                margin-right: 20px;
            }
            .brand {
                margin-right: 50px;
            }
        }
        .fontColor {
            color: #1890ff;
            margin-right: 10px;
        }
    }
    .bottom {
        width: 100%;
        display: flex;
        .bottomLeft {
            width: 30%;
            border: 1px solid #000;
            .leftContent {
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-bottom: 1px solid #000;
                height: 40px;
            }
        }
        .bottomRight {
            width: 70%;
            margin-left: 10px;
            .text {
                text-align: left;
            }
            .chart {
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                .chartItem {
                    width: 46%;
                    height: 200px;
                    border: 1px solid red;
                    margin: 10px;
                }
            }
        }
    }
}
</style>

carTable2.vue

<template>
    <div>
        <div class="part">
            <div class="title">车辆统计</div>
        </div>
        <div v-for="(i, index) in list" :key="index" class="itemBox">
            <div class="top">
                <div class="topLeft">
                    <div class="brand">车辆品牌：{{ i.carName }}</div>
                    <div>最大输出功率：{{ i.carNumber }}KW</div>
                </div>
                <div>
                    <span @click="handleChange(i, index)" class="fontColor">
                        {{ i.isopen ? '收起' : '展开' }}
                    </span>
                    <span @click="open(i)">详情</span>
                </div>
            </div>
            <div class="bottom" v-show="i.isSubShow" style="">
                <!-- 左边的 -->
                <div class="bottomLeft">
                    <div
                        class="leftContent"
                        v-for="(k, q) in i.data"
                        :key="q"
                        @click="getPlateNumberList(k, q)"
                    >
                        <div>{{ q + 1 }}</div>
                        <div>{{ k.carName }}</div>
                        <div>最大输出功率：{{ k.carNumber }}KW</div>
                    </div>
                </div>
                <!-- 右边的 -->
                <div class="bottomRight">
                    <div class="text">
                        共{{ list[parentIndex].data[flagNum].total }}辆充电车辆
                    </div>
                    <div class="chart">
                        <div
                            v-for="(png, index) in list[parentIndex].data[flagNum].pngList"
                            :key="index"
                            class="chartItem"
                        >
                            <car-png :items="png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import carPng from './carPng.vue'
export default {
    components: {
        carPng,
    },
    data() {
        return {
            id: 1,
            total: 0,
            list: [
                {
                    carName: '奔驰',
                    carNumber: '500kw',
                    isopen: false,
                    isSubShow: false,
                    data: [
                        { carName: '奔驰01', carNumber: 500 },
                        { carName: '奔驰02', carNumber: 600 },
                    ],
                },
                {
                    carName: '宝马',
                    carNumber: '500kw',
                    isopen: false,
                    isSubShow: false,
                    data: [
                        { carName: '宝马01', carNumber: 500 },
                        { carName: '宝马02', carNumber: 600 },
                    ],
                },
                {
                    carName: '玛莎拉蒂',
                    carNumber: 500,
                    isopen: false,
                    isSubShow: false,
                },
            ],
            flagNum: 0,
            parentIndex: 0,
        }
    },
    methods: {
        getPlateNumberList(k, q) {
            this.flagNum = q
            console.log(this.flagNum, 'this.flagNum')
            console.log(this.list[this.parentIndex], 'this.list[this.parentIndex]')
            console.log(
                this.list[this.parentIndex].data[q],
                'this.list[this.parentIndex].data[q]'
            )
            const str = this.list[this.parentIndex].data[q]
            str.total = 0
            str.pngList = []
            if (k.carName == '奔驰01') {
                str.total = 3
                str.pngList = [
                    {
                        plateNumber: '京123',
                        platedata: [
                            {
                                name: 'Email',
                                type: 'line',
                                stack: 'Total',
                                data: [120, 132, 101, 134, 90, 230, 210],
                            },
                            {
                                name: 'Union Ads',
                                type: 'line',
                                stack: 'Total',
                                data: [220, 182, 191, 234, 290, 330, 310],
                            },
                            {
                                name: 'Video Ads',
                                type: 'line',
                                stack: 'Total',
                                data: [150, 232, 201, 154, 190, 330, 410],
                            },
                            {
                                name: 'Direct',
                                type: 'line',
                                stack: 'Total',
                                data: [320, 332, 301, 334, 390, 330, 320],
                            },
                            {
                                name: 'Search Engine',
                                type: 'line',
                                stack: 'Total',
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                            },
                        ],
                    },
                    {
                        plateNumber: '京456',
                        platedata: [
                            {
                                name: 'Email',
                                type: 'line',
                                stack: 'Total',
                                data: [100, 100, 100, 100, 100, 100, 210],
                            },
                            {
                                name: 'Union Ads',
                                type: 'line',
                                stack: 'Total',
                                data: [220, 182, 191, 234, 290, 330, 310],
                            },
                            {
                                name: 'Video Ads',
                                type: 'line',
                                stack: 'Total',
                                data: [150, 232, 201, 154, 190, 330, 410],
                            },
                            {
                                name: 'Direct',
                                type: 'line',
                                stack: 'Total',
                                data: [320, 332, 301, 334, 390, 330, 320],
                            },
                            {
                                name: 'Search Engine',
                                type: 'line',
                                stack: 'Total',
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                            },
                        ],
                    },
                    { plateNumber: '京789' },
                    {
                        plateNumber: '京789',
                    },
                ]
                console.log(str.pngList, 'str.pngList')
            } else {
                str.total = 2
                str.pngList == []
            }
        },
        handleChange(item, parentIndex) {
            this.parentIndex = parentIndex
            item.isSubShow = !item.isSubShow
            item.isopen = !item.isopen //右侧图标根据内容隐藏或显示进行相应显示
        },
        open() {
            this.$refs.carTypeDetail.show()
        },
    },
}
</script>

<style lang="less" scoped>
.part {
    height: 40px;
    background: white;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    .title {
        font-size: 18px;
    }
}
.itemBox {
    padding: 10px 20px;
    .top {
        display: flex;
        justify-content: space-between;
        .topLeft {
            display: flex;
            img {
                width: 50px;
                height: 50px;
                margin-right: 20px;
            }
            .brand {
                margin-right: 50px;
            }
        }
        .fontColor {
            color: #1890ff;
            margin-right: 10px;
        }
    }
    .bottom {
        width: 100%;
        display: flex;
        .bottomLeft {
            width: 30%;
            border: 1px solid #000;
            .leftContent {
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-bottom: 1px solid #000;
                height: 40px;
            }
        }
        .bottomRight {
            width: 70%;
            margin-left: 10px;
            .text {
                text-align: left;
            }
            .chart {
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                .chartItem {
                    width: 46%;
                    height: 200px;
                    border: 1px solid red;
                    margin: 10px;
                }
            }
        }
    }
}
</style>

carPng.vue

<template>
  <div>
    <div class="title">
      <div>{{ items.plateNumber }}</div>
      <div @click="showDetails" class="color">详情</div>
    </div>
    <div>
      <div ref="echarts" :class="big ? 'more' : 'main'"></div>
    </div>
    <charge-record-details ref="chargeRecordDetails" />
  </div>
</template>

<script>
import chargeRecordDetails from './chargeRecordDetails'
import * as echarts from 'echarts'
export default {
  props: ['items', 'big'],
  components: {
    chargeRecordDetails,
  },
  mounted() {
    this.showImg()
    console.log(this.items, 'items')
    console.log(this.items.platedata, '222')
  },
  methods: {
    showImg() {
      // var chartDom = document.getElementById('main')
      var chartDom = this.$refs.echarts
      var myChart = echarts.init(chartDom)
      var option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          left: '5%',
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        },
        grid: {
          top: '10%',
          left: '8%',
          right: '8%',
          bottom: '7%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: this.items.platedata,
      }
      myChart.setOption(option)
    },
    showDetails() {
      this.$refs.chargeRecordDetails.show()
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  height: 40x;
  border-bottom: 1px solid #000;
}
.main {
  width: 300px;
  height: 200px;
}
.more {
  width: 200px;
  height: 200px;
}
.color {
  color: rgba(24, 144, 255, 1);
}
</style>

运行结果：

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
余大雷 2023-09-27 10:24
关注
左右联动的效果就是点击左边列表来做到右边echarts更新视图，那就在左边点击列表的同时拿到点击的对象，根据这个对象去获取右边视图索要更新的数据，v-for你是可以拿到每个点击对象的索引，拿到索引就知道点击了那个列表中的哪条数据，这样你就更好的去区分。当然不建议这样做，最后是将数据结构改变成树形结构才更直观的去操作

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

报告相同问题？

关注问题

vue中v-for循环无法显示列表数据 javascript vue.js 前端有问必答
2022-11-27 19:58

回答 4 已采纳 data中定义过contents没有？
Vue-Echarts V-For 循环动态生成图表的数据传递 echarts javascript vue.js
2022-01-18 22:31

回答 1 已采纳可以看下我这篇文章 Vue实现ECharts动态渲染多个图表，并可以联动_ZionHH的博客-CSDN博客 Vue实现ECharts动态渲染
vue v-for出现无限循环问题 javascript vue.js 前端
2021-10-10 21:46

回答 2 已采纳死循环是指，内存会泄漏吗？因为你放在 for里执行很多遍是正常的。如果内存泄漏了就不正常了。有报错吗?
【编程实践】编程语言之 Smalltalk
2023-04-01 12:31

AI天才研究院的博客 Smalltalk，被公认为历史上第二个面向对象的程序设计语言，和第一个真正的集成开发环境（IDE）。Smalltalk由艾伦·凯，Dan Ingalls，Ted Kaehler，Adele Goldberg等于70年代初在Xerox PARC开发。Smalltalk对其它众多...
vue使用v-for循环直接使用方法获得的数组问题 html5 vue.js
2019-11-13 10:40

回答 3 已采纳要这个样子的？ [https://codepen.io/bettermo/pen/VJdgVE](https://codepen.io/bettermo/pen/VJdgVE "https://co
vue 勾选v-for循环渲染的div css javascript vue.js
2021-06-04 10:24

回答 2 已采纳 <template> <a-checkbox-group @change="onChange"> <a-row>
vue关于v-for循环添加样式 css vue.js
2021-05-07 21:16

回答 3 已采纳 <div style="display: inline;margin: 10px" v-for="(item,index) in preparation.questionList" v-if=
thuc-hanh-for
2021-03-30 22:05

在编程中，"for" 循环是一种基本的控制流结构，常用于执行重复任务。在 HTML 中，虽然它本身不支持直接的循环结构，但在结合 JavaScript 或其他服务器端语言时，"for" 循环就显得尤为重要。下面将详细介绍 "for" ...
vue v-for循环map时获取不到元素 vue.js
2020-05-24 00:40

回答 1 已采纳 subMenu 这个返回回来应该是一个集合而不是object。如果是集合那你写法是没有问题的，而且看你的应用常见这个也应该返回耳机菜单的集合才对，如果没有任何数据也该返回一个空集合。他objec
vue dom有 v-for 还有 v-if 有没办法, v-if 某条件时,终止 v-for,不再循环下去了 javascript vue.js 有问必答
2022-07-09 03:24

回答 4 已采纳不推荐v-for与v-if同时使用，因为v-for的优先级较高，会先讲所有的dom渲染才会根据v-if去判断销毁，影响性能。想要达成你说所的效果，其中一个方法是可以对原始数据进行处理，将你最终需要渲染
vue 使用v-for循环输出图标 vue.js
2019-10-23 10:39

回答 1 已采纳自己先定义图标数据，再在template里面遍历它 javascript ``` data(){ return { icons:["icon-user","icon-iphone","
linux awk for循环,Linux之awk详解
2021-05-17 11:24

易烊千玺的小朋友的博客 '#Gun awk的相关用法awk的工作原理一次读取一行文本，按输入分隔符进行切片，切成...可以对单个片断进行判断，也可以对所有断进行循环判断。其默认分隔符为空格awk的基本用法格式awk [options] 'program' FILE.........
vue指令v-for循环video标签后视频无法播放,怎么解决。 javascript vue.js 前端
2021-12-13 10:18

回答 1 已采纳 video标签加controls属性了吗
脑语言v0.5.8 2500令【单字编程】
2022-07-11 06:55

脑语言的博客这是脑语言v0.5.8版的2500个单字（也称为“令”与“一令”），通过【单字编程】（并不仅是中文编程，而是混合英文关键字，但以单字为主的命名）也许是英文不太好时又希望能写代码的其中一种方式。我在做脑语言...
Python“ for”循环（定迭代）
2020-07-15 02:45

cumei1658的博客 This tutorial will show you how to perform definite iteration... 本教程将向您展示如何使用Python for循环执行确定的迭代。 In the previous tutorial in this introductory series, you learned the followin...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
修改了问题 9月26日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 9月26日

悬赏问题

¥15 网友们我该怎么办啊，急
¥15 混合键合键合机对准标识
¥100 现在不懂的是如何将当前的相机中的照片,作为纹理贴图,映射到扫描出的模型上
¥15 目标跟踪，计算机视觉
¥15 魔霸ROG7 pro,win11.息屏后会显示黑屏,如图，如何解决？(关键词-重新启动)
¥15 有没有人知道这是哪里出了问题啊？要怎么改呀？
¥200 C++表格文件处理-悬赏
¥15 Windows Server2016本地登录失败
¥15 复合卡卡号轨道写入芯片卡
¥20 基于MATLAB的TDOA

v-for循环展示页面结构问题

2条回答 默认 最新

问题事件

悬赏问题

2条回答默认最新