遍历树形数据，动态展示授权平台和期限
需求
根据后端返回的树形数据，展示授权平台和授权期限用户选择不同的授权平台时，展示对应平台下的授权期限最终显示所选授权平台和期限对应的价格
后台返回的数据
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 实现
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, }; },};￥0.01
授权平台：
授权期限：
原生 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元" }, {
以上就是如何根据选择的授权平台和期限动态计算并显示价格？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561191.html
微信扫一扫 
支付宝扫一扫 
