直接从json加载
最简单的方法就是用 import 的方式从json文件加载，很方便。
import { menu } from '/jsonPlat/menu.json'
只是这样的方式不容易实现动态修改的功能，比如热更新。
因为 vite2 会把 json格式变成 js 的形式，然后再加载进来。
如果想要动态，或者热更新，那么就需要用 axios 加载 json文件。
这样项目发布之后，才可以通过直接修改json文件的方法来实现热更新的效果。
从webSQL加载
在开发阶段，菜单并不是固定不变的，需要维护修改，如果直接改json文件的话，要么手撸，要么用代码实现。
手撸的话太麻烦，用代码维护的话，需要读写权限，也有点麻烦。
所以开发阶段，我们可以把菜单放入webSQL（当然也可以存入MySQL），这样就可以很方便的动态维护。
从indexedDB加载
为啥还弄了个indexedDB呢？有两个目的：
- 实现客户端的缓存。
- 统一开发模式和生产模式里，组件的使用接口。
从后端加载json文件，有两个问题，一个是会受到网速的影响，另一个是浏览器的缓存问题。
浏览器会对下载的json文件进行缓存，这个本来是好事，可以避免每次都从服务器加载。
但是按F12看看“网络”情况，从缓存加载json文件，还是需要时间，虽然很短，但是还是要进行判断检查是否过期，是否需要重新加载，然后从缓存加载，缓存又分为内存和硬盘，内存很快几乎不用时间，硬盘就相对慢了。
然后就是更新缓存的问题，如果实现热更新，服务器上面的json文件更新了，但是浏览器还是顽固的用本地缓存文件，这个怎么办？
不可控因素太多，所以还是干脆在第一次打开的时候，从服务器下载json文件，然后存入indexedDB。可以避免很多麻烦，还完全可控，虽然可以写不少代码，但是能用代码解决的都不是问题。
存入状态
不是有缓存了吗？为啥又来个状态？
这个说起来真的是一言难尽！
- indexedDB是异步操作，比较麻烦。
- indexedDB的读取速度实在太感人了，等着读取出来再渲染，页面有明显的延迟感，这个不能忍。
所以只好干脆存入状态里面，是需要慢一次，以后就省心了 。
状态可以直接读取，省事，全局可用，这样就简单了很多。
变成下拉列表
菜单除了左侧的形式之外，还需要做成各种形式，比如下拉列表框的形式。
如果菜单项比较少的话，我们可以用一个下拉列表框来实现，我们使用 el-select-v2 的自定义模板功能做一个缩进的效果，这样就很好分辨菜单的等级和归属关系了，如下图。
效果
实现方式
<el-select-v2
v-model="value"
:options="optionList"
placeholder="请选择"
@change="mySubmit"
:id="'c' + controlId"
:name="'c' + controlId"
:size="size"
clearable
>
<template #default="{item}">
<span >{{ item.value }}</span>
<span :style="'padding-left:' + 20 * item.level + 'px;'">
{{ item.label }}
</span>
</template>
</el-select-v2>
一个循环即可
因为数据源就是一个数组，单层的，所以一次遍历即可，不用递归，不用子组件。缩进
那么二级菜单的缩进效果是如何实现的呢？
我们可以使用 css 的 padding-left 进行缩进处理，缩进多少由 level 决定。
处理数据源
// 设置上级模块
const parentModule = moduleMeta.itemMeta[100020]
parentModule.controlType = 163
parentModule.optionList.length = 0
state.menus.forEach(menu => {
if (menu.moduleLevel === 1) {
// 一级
parentModule.optionList.push(
{
value: menu.id,
label: menu.title,
level: menu.moduleLevel
}
)
} else {
// 二级，找到父级，插入
const index = parentModule.optionList.findIndex((a) => a.id === menu.parentId)
parentModule.optionList.splice(index, 0, {
value: menu.id,
label: menu.title,
level: menu.moduleLevel
})
}
})
因为是固定二级数的菜单，所以处理代码比较简单。
这里并不是变成嵌套的模式，而是先push第一级的菜单，然后第二级的菜单，先找到父级菜单的数组下标，然后用 splice 在下标后面插入二级菜单。
这样数组的顺序就是：一级菜单，一级菜单的下属二级菜单。
变成联动的下拉列表框
菜单项少的话一个下拉列表框就可以了，但是如果多的话，选起来会比较麻烦，所以我们可以做成两个联动的下拉列表框。
我们可以使用 el-cascader 来实现。
效果
处理数据源
parentModule.controlType = 162
parentModule.optionList.length = 0
state.menus.forEach(menu => {
if (menu.moduleLevel === 1) {
// 一级
parentModule.optionList.push(
{
value: menu.id,
label: menu.title,
children: []
}
)
} else {
// 二级，找到父级的 children ，push
const index = parentModule.optionList.findIndex((a) => a.value === menu.parentId)
parentModule.optionList[index].children.push({
value: menu.id,
label: menu.title
})
}
})
按照 el-cascader 的要求做成嵌套的数组即可。
这样的话，菜单项多了也不怕。
