接着昨天的
- 我今天才发现，昨天的数有问题，不能把，vue2 开启了严格模式 我有的数据是09 它没不能接受0这个无意义的字符，所以会报错
- 昨天拿到了一级素材和一级的value 今天把先它渲染上去看看
- 列表有了，并且是可以点击的
- 是通过Object.skys(data) 进行的取值，在初始化阶段，也就是设置初始状态，我们还要默认显示第一项数据的第一项子项的title 及图表。
- 假设我们要取第一项的值的 二级keys 可以通过 data[0]的方式来取到
- 这里还要补充一下，tabs 上的配置 如果v-model 的value == name 的值他就会默认显示哪一项
- 例如
- 我将 v-model 的值设为干果
- 那他的 就会默认展示干果
- 如果 v-model的值不存在，则没有默认选中
一、 取二级数据 渲染默认值
- 了解了这个之后，我们就可以将默认值设施上了
- 由于不能打点调用，我使用找到2级数据的方法是--对一级数据 title 列表进行循环，如果他和默认值的value 一致，就使用相应index 取出对应一级valueList 的子数据，代码如下
async getList(){
// 我们通过发请求，拿到了数据，并赋值给了 objData
let data = await axios.get("/web/getList")
this.objData = data.data
console.log(this.objData);
// 解析出来渲染一级 标题的数据
this.titleList1 = Object.keys(this.objData);// 得到 ['糖果', '干果', '饮品']
this.titleContent1 = Object.values(this.objData)// 得到1级 value
// 首先设置value 的默认值
// 我选择设置第一项的title
this.value = this.titleList1[0];
// 对 列表进行循环 取出总数据的 每一项数据
this.titleList1.forEach((item,index)=>{
// 如果 列表的值与 value（默认值）相同取出下一级 继续取默认展示的数据
// 条件成立才会走下一步
if(item == this.value){// 糖果 - 糖果
// 有上面取值的步骤可以知道，他们的 index 绝对是一样的 所以肯定能 取到正确的值
// this.titleList1 = Object.keys(this.objData);// 得到 ['糖果', '干果', '饮品']
// this.titleContent1 = Object.values(this.objData)// 得到1级 value
let t2 = this.titleContent1[index]; // 若是 value 是糖果，取到的将是 奶糖-小鹅软糖-糖针 的数据
console.log(t2,'6666666666666666666666666666');
this.titleList2 = Object.keys(t2);// 那它就是二级titleList 的数据了
this.titleContent2 = Object.values(t2);// 那它就是二级 内容 数据了，用来显示，查找三级
console.log(this.titleList2,'8888888888888888888888888888888');
// 还剩下柱状图的数据 我也设默认值是第一项
// 这里取到的是2013 2014等日期，我们把它设置为图表的 柱标
this.chartOption.xAxis.data = Object.keys(this.titleContent2[0]);
console.log(Object.keys(this.titleContent2[0]),'============================================');
// 这里取到的是对应 2013数据 2014数据 等
this.chartOption.series.data = Object.values(this.titleContent2[0]);
}
})
- 但这样它是没有默认显示的，因为我故意没有设置value2 嘿嘿，看看，图也没出来，这就是我内天遇到的问题
- 再在 getList 方法里面加上
this.value2 = this.titleList2[0]就OK了
点击一级 切换二级默认 图表
- 1.首先 tabs 有一个自定义事件
@tab-click="handle2Click" - 2.点击时切换 vuelu 根据上面代码的逻辑，取出对应二级，再渲染图表
- 3.扩展：点一级连带切换二级会了，那二级的点击事件应该也不难，相信你也能写的出来。
- 最后，按照这个思路先试一试，明天我再写，下面是没有太多备注的 代码
<template>
<div class="box">
<h2>el-tabs 渲染</h2>
<el-tabs v-model="value" @tab-click="handleClick">
<el-tab-pane
style="height: 400px"
:label="item"
:name="item"
v-for="item in titleList1"
>
<el-tabs v-model="value2" @tab-click="handle2Click">
<el-tab-pane
:label="arrItem"
:name="arrItem"
v-for="arrItem in titleList2"
>
<Chart
v-if="show"
class="chartHeight"
:option="chartOption"
></Chart>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import axios from 'axios';
import Chart from "../../components/Chart.vue";
export default {
name: "RenderingForObjectForm",
data() {
return {
data2:[],
show: true,
time: "",
chartOption: {
xAxis: { data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月",] },
series: {
type: "line",
smooth: true,
data: [223, 43, 112, 342, 123, 431, 123, 198, 216, 127],
},
},
objData:{},
// 渲染一级 标题的数据
titleList1:[],
// 一级 标题对应的数据
titleContent1:[],
titleList2:[],
titleContent2:[],
value: "",
value2:"",
};
},
mounted(){
// 我是用了mock
this.getList();//获取数据 的方法
},
methods: {
async getList(){
// 我们通过发请求，拿到了数据，并赋值给了 objData
let data = await axios.get("/web/getList")
this.objData = data.data
console.log(this.objData);
// 解析出来渲染一级 标题的数据
this.titleList1 = Object.keys(this.objData);// 得到 ['糖果', '干果', '饮品']
this.titleContent1 = Object.values(this.objData)// 得到1级 value
// 首先设置 一级 默认值
this.value = this.titleList1[0];
this.titleList1.forEach((item,index)=>{
// 如果 列表的值与 value（默认值）相同取出下一级
if(item == this.value){
let t2 = this.titleContent1[index];
this.titleList2 = Object.keys(t2);// 那它就是二级 titleList
this.titleContent2 = Object.values(t2);// 二级内容数据 用来显示/查找三级
console.log(this.titleList2,'8888888888888888888888888888888');
// 还剩下柱状图的数据 我也设默认值是第一项
// 这里取到的是2013 2014等日期，我们把它设置为图表的 柱标
this.chartOption.xAxis.data = Object.keys(this.titleContent2[0]);
// 这里取到的是对应 2013数据 2014数据 等
this.chartOption.series.data = Object.values(this.titleContent2[0]);
this.value2 = this.titleList2[0]
}
})
},
handleClick() {
},
handle2Click() {
},
},
components: { Chart },
};
</script>
<style scoped lang="less">
.chartHeight {
height: 300px;
width: 100%;
}
</style>
mock的数据
import Mock from 'mockjs'
//获取用户表格数据
Mock.mock("/web/getList", "get", ()=>{return {
"糖果":{
"奶糖":{
"2012":123,
"2013":234,
"2014":433,
"2015":212,
"2017":437
},
"小鹅软糖":{
"周一":293,
"周二":746,
"周三":938,
"周四":363,
"周五":648
},
"糖针":{
"六月":2139,
"七月":2516,
"八月":2126,
"九月":7363,
"十月":9283
}
},
"干果":{
"腰果":{
"凌晨":9,
"早晨":12,
"中午":23,
"黄昏":198,
"夜晚":263
},
"夏威夷":{
"2012":938,
"2013":373,
"2014":123,
"2015":212,
"2017":360
},
"核桃":{
"六月":123,
"七月":345,
"八月":696,
"九月":463,
"十月":1964
}
},
"饮品":{
"矿泉水":{
"凌晨":21,
"早晨":445,
"中午":3242,
"黄昏":2739,
"夜晚":1234
},
"茉莉清乳":{
"凌晨":2,
"早晨":90,
"中午":123,
"黄昏":8739,
"夜晚":562
},
"红牛":{
"凌晨":38,
"早晨":125,
"中午":837,
"黄昏":9,
"夜晚":1523
}
}
}});
