遍历树形数据，动态展示授权平台和期限
需求
- 根据后端返回的树形数据，展示授权平台和授权期限
- 用户选择不同的授权平台时，展示对应平台下的授权期限
- 最终显示所选授权平台和期限对应的价格
后台返回的数据
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
price_list: [
{
title: "哔哩哔哩",
children: [
{
id: 1,
platform: 1,
platform_title: "哔哩哔哩",
years: 0,
price: 0.01,
address: 1,
address_title: "一年",
show_title: "¥0.4元"
},
{
id: 19,
platform: 1,
platform_title: "哔哩哔哩",
years: 1,
price: 0.01,
address: 0,
address_title: "不限",
show_title: "¥1元"
}
]
},
{
title: "微博",
children: [
{
id: 17,
platform: 3,
platform_title: "微博",
years: 0,
price: 0.01,
address: 0,
address_title: "一年",
show_title: "¥0.2元"
},
{
id: 13,
platform: 3,
platform_title: "微博",
years: 0,
price: 0.01,
address: 0,
address_title: "五年",
show_title: "¥1元"
}
]
},
{
title: "快手",
children: [
{
id: 16,
platform: 2,
platform_title: "快手",
years: 0,
price: 0.01,
address: 0,
address_title: "不限",
show_title: "¥0.5元"
}
]
}
]vue 实现
<template>
<div>
<p class="price">￥0.01</p>
<div class="au_plat">
<p class="type">授权平台：</p>
<div class="select">
<el-select v-model="platform" @change="updatePrice">
<el-option
v-for="item in platforms"
:key="item.platform"
:label="item.title"
:value="item.platform"
/>
</el-select>
</div>
</div>
<div class="au_per">
<p class="type">授权期限：</p>
<div class="select">
<el-select v-model="address" @change="updatePrice">
<el-option
v-for="item in addressList"
:key="item.address"
:label="item.address_title"
:value="item.address"
/>
</el-select>
</div>
</div>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const priceList = reactive([
{
title: "哔哩哔哩",
children: [
{
id: 1,
platform: 1,
platform_title: "哔哩哔哩",
years: 0,
price: 0.01,
address: 1,
address_title: "一年",
show_title: "¥0.4元"
},
{
id: 19,
platform: 1,
platform_title: "哔哩哔哩",
years: 1,
price: 0.01,
address: 0,
address_title: "不限",
show_title: "¥1元"
}
]
},
{
title: "微博",
children: [
{
id: 17,
platform: 3,
platform_title: "微博",
years: 0,
price: 0.01,
address: 0,
address_title: "一年",
show_title: "¥0.2元"
},
{
id: 13,
platform: 3,
platform_title: "微博",
years: 0,
price: 0.01,
address: 0,
address_title: "五年",
show_title: "¥1元"
}
]
},
{
title: "快手",
children: [
{
id: 16,
platform: 2,
platform_title: "快手",
years: 0,
price: 0.01,
address: 0,
address_title: "不限",
show_title: "¥0.5元"
}
]
}
]);
const state = reactive({
chosenPlatform: null,
chosenAddress: null,
platform: null,
address: null,
platforms: [],
addressList: [],
});
// 初始化
const init = () => {
state.platform = priceList[0].children[0].platform;
state.address = priceList[0].children[0].address;
state.platforms = priceList.map((item) => {
return {
platform: item.children[0].platform,
title: item.title,
};
});
};
// 更新平台
const updatePlatform = (val) => {
const platformData = priceList.find((item) => item.children[0].platform === val);
state.addressList = platformData.children.map((item) => {
return {
address: item.address,
address_title: item.address_title,
};
});
state.address = platformData.children[0].address;
};
// 更新价格
const updatePrice = () => {
const chosenPlatformData = priceList.find(
(item) => item.children[0].platform === state.platform
);
const chosenAddressData = chosenPlatformData.children.find(
(item) => item.address === state.address
);
state.chosenPlatform = chosenPlatformData.title;
state.chosenAddress = chosenAddressData.address_title;
};
// 监听平台和地址变化
watchEffect(() => {
updatePlatform(state.platform);
updatePrice();
});
init();
return {
platform: state.platform,
address: state.address,
platforms: state.platforms,
addressList: state.addressList,
chosenPlatform: state.chosenPlatform,
chosenAddress: state.chosenAddress,
updatePrice,
};
},
};
</script>原生 JavaScript 实现
const priceList = [
{
title: "哔哩哔哩",
children: [
{
id: 1,
platform: 1,
platform_title: "哔哩哔哩",
years: 0,
price: 0.01,
address: 1,
address_title: "一年",
show_title: "¥0.4元"
},
{
id: 19,
platform: 1,
platform_title: "哔哩哔哩",
years: 1,
price: 0.01,
address: 0,
address_title: "不限",
show_title: "¥1元"
}
]
},
{
title: "微博",
children: [
{
id: 17,
platform: 3,
platform_title: "微博",
years: 0,
price: 0.01,
address: 0,
address_title: "一年",
show_title: "¥0.2元"
},
{ 
