上一章进度
复制代码
取二级数据 渲染默认值 这是上一章的进度，也就意味着初始化结束
也可以说 组件挂载之后的要展示的内容 的逻辑处理完毕了1.点击一级 切换二级默认 展示的图表
- 首先查看文档得知 tabs有一个事件
它的参数在这里是没有用到 翻译过来一个是 选项卡窗格上下文（单项内容所处的的环境） 第二个是事件对象，触发事件的 相关数据 在哪里触发的-什么形式触发的，触发体身上还有什么属性等等 
这里从糖果切换到干果之后会 tabs 会自动的将 el-tab-pane 也就是每一项零食类型的 名字（糖果、干果..）存到 value上去
-
我要做的是判断 现在展示的是哪一项数据 以便取出表格数据进行渲染
- 将 value 与 titleList1 （品种名字组成的列表）里面与他相似的
-
它和做初始化的逻辑是一样的，基本可以照搬。
-
只不过触发条件 一个是 组件挂载完毕，一个是手动触发。
代码如下
kotlin
js
复制代码
handleClick() {
this.titleList1.forEach((item,index)=>{
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]);
console.log(Object.keys(this.titleContent2[0]),'============================================');
// 这里取到的是对应 2013数据 2014数据 等
this.chartOption.series.data = Object.values(this.titleContent2[0]);
this.value2 = this.titleList2[0]
}
})
},- 这是我用上边的代码实现之后的，数据确实有变化 但是图表是坍缩的，这个也很好解决 放大缩小一下窗口就好了，至于为什么我明天说。
二级点击事件
- 经过上面的数据显示不同，证明我们的切换确实是成功的
- 一级照搬 二级呢，不过是多个判断 操作也一样
- 1.找到要渲染的数据-这个找到不仅仅指的是我们知道要给哪一项，也要体现在代码上
- 这里我又阐述一遍 这一步的原因
- // 首先 要先循环一级，就像我要买矿泉水知道要去饮品区一样
- // 因为二级的数据被包裹在 某一项一级里面
- // 在 titleList1里 与当前 value 一致索引的 titleContent2 数据，就是我们要去匹配的二级
- // 走了这一步我们就相当于进入了 饮品区
- 找到了饮品区 ，与value2 这个便签，看看我们要找的是什么 打印this.value2
- 点击 标题就可以获得，能获得就能拿去对比
既然没问题，先把代码奉上。
js
handle2Click() {
// 首先 要先循环一级，就像我要买矿泉水知道要去饮品区一样
// 因为二级的数据被包裹在 某一项一级里面
// 在 titleList1里 与当前 value 一致索引的 titleContent2 数据，就是我们要去匹配的二级
// 走了这一步我们就相当于进入了 饮品区
this.titleList1.forEach((item,index)=>{
if(item == this.value){
// console.log(item,this.value,'??{{??{{??{{---------------------------------}}}}}}');
// 糖果 糖果 ??{{??{{??{{---------------------------------}}}}}}
// 看来这里就是饮料区了 让我看看我要买什么 this.value2
// console.log('我要找什么? value2是什么',this.value2);
// 在初始化的时候存了个2级的内容,当一级改变的时候 也有存
this.titleList2.forEach((item,index)=>{// 也一样 看title是否与 value2一致
// 现在开始观察呢个是我们(this.value2) 一样的
if(item == this.value2){
console.log('一样吗？？？',item,this.value2,'+++++_____+++++');
// 一样就拿数据渲染
// 这里取到的是2013 2014等日期，我们把它设置为图表的 柱标
this.chartOption.xAxis.data = Object.keys(this.titleContent2[index]);// 这里换成索引对应的数据
// console.log(Object.keys(this.titleContent2[0]),'============================================');
// 这里取到的是对应 2013数据 2014数据 等
this.chartOption.series.data = Object.values(this.titleContent2[index]);
}
})
}
})
},简化代码
- 1.同一个功能一样，多个地方都用到
- 比如上述代码中初始化 和点击一级的操作都一样
js
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
// 首先设置 一级title的默认值
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);
this.titleContent2 = Object.values(t2);
this.chartOption.xAxis.data = Object.keys(this.titleContent2[0]);
this.chartOption.series.data = Object.values(this.titleContent2[0]);
this.value2 = this.titleList2[0]
}
})
},
handleClick() { // 点击事件
this.titleList1.forEach((item,index)=>{
if(item == this.value){
let t2 = this.titleContent1[index];
this.titleList2 = Object.keys(t2);
this.titleContent2 = Object.values(t2);
this.chartOption.xAxis.data = Object.keys(this.titleContent2[0]);
this.chartOption.series.data = Object.values(this.titleContent2[0]);
this.value2 = this.titleList2[0]
}
})
},- 2.重复项数据不一样，操作一样
- 比如上述代码中都需要对 图表数据重新赋值
this.chartOption.xAxis.data = Object.keys(this.titleContent2[0]); this.chartOption.series.data = Object.values(this.titleContent2[0]);
- 像第一点： 点击事件 可以先把 重复代码提取出来，放进一个函数里，直接调用
js
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
// 首先设置 一级title的默认值
this.value = this.titleList1[0];
this.setList1()
},
handleClick() { // 点击事件
this.setList1()
},
handle2Click() {
this.titleList1.forEach((item,index)=>{
if(item == this.value){
this.titleList2.forEach((item,index)=>{
if(item == this.value2){
this.chartOption.xAxis.data = Object.keys(this.titleContent2[index]);
this.chartOption.series.data = Object.values(this.titleContent2[index]);
}
})
}
})
},
setList1(){
this.titleList1.forEach((item,index)=>{
if(item == this.value){
let t2 = this.titleContent1[index];
this.titleList2 = Object.keys(t2);
this.titleContent2 = Object.values(t2);
this.chartOption.xAxis.data = Object.keys(this.titleContent2[0]);
this.chartOption.series.data = Object.values(this.titleContent2[0]);
this.value2 = this.titleList2[0]
}
})
}
},-
代码没问题 可以正常使用
-
接下来是第二点： 重复项数据不一样，操作一样
-
也一样 先把那两行代码提出来
-
提取前我们看看他们的不同处，显然是 赋值后面的值的索引，不同。
-
不知道怎么处理可以带入情境 将不同处作为传值的坑位 再重头捋一遍
-
初始化时取默认值，这时候数据都是取得第一项也就是数据的0项里的数据的0项，那在这里我们传的值是0
-
-
没问题
如法炮制 把二级事件的换了-也是没有问题
js
handle2Click() {
this.titleList1.forEach((item,index)=>{
if(item == this.value){
this.titleList2.forEach((item,index)=>{
if(item == this.value2){
this.editOption(index)
}
})
}
})
},只不过初始化的时候一个死值还穿来穿去，不如设个默认值
ok完美 睡觉！！！！
简化后的代码
js
<template>
<div class="box">
<h2>el-tabs 渲染</h2>
<el-tabs v-model="value" @tab-click="handleClick">
<el-tab-pane style="height: 400px" v-for="(item,index) in titleList1" :key="index"
:label="item"
:name="item"
>
<el-tabs v-model="value2" @tab-click="handle2Click">
<el-tab-pane v-for="(arrItem,index) in titleList2" :key="index"
:label="arrItem"
:name="arrItem"
>
<Chart class="chartHeight"
:option="chartOption"
/>
</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 {
chartOption: {
xAxis: { data: [] },
series: {
type: "line",
smooth: true,
data: [],
},
},
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);
// 首先设置 一级title的默认值
this.value = this.titleList1[0];
this.setList1()
},
handleClick() { // 点击事件
this.setList1()
},
handle2Click() {
this.titleList1.forEach((item,index)=>{
if(item == this.value){
this.titleList2.forEach((item,index)=>{
if(item == this.value2){
this.editOption(index)
}
})
}
})
},
setList1(){
this.titleList1.forEach((item,index)=>{
if(item == this.value){
let t2 = this.titleContent1[index];
this.titleList2 = Object.keys(t2);
this.titleContent2 = Object.values(t2);
this.editOption()
this.value2 = this.titleList2[0]
}
})
},
editOption( index = 0){
this.chartOption.xAxis.data = Object.keys(this.titleContent2[index]);
this.chartOption.series.data = Object.values(this.titleContent2[index]);
}
},
components: { Chart },
};
</script>
<style scoped lang="less">
.chartHeight {
height: 300px;
width: 100%;
}
</style>