携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

上级菜单的选择

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

菜单页面

上面几节中，将 顶级菜单 和 菜单管理 页面搭建已经完毕。

但是其中 菜单 页面 及 功能 并没有进行完善

这里先将 菜单 的页面进行截图，重点是在，选择 上级菜单 的逻辑上面

选择上级菜单

能够产生 上级菜单 的前提就是：

• 只有不是 顶级菜单 的情况下，才会产生该表单项

• 而且在 菜单 页面，只能选择，顶级菜单

• 在 按钮 页面，只能选择，菜单

而且 el-tree-select 这个组件，还需要我们自定义 props

以及 在我们 切换 选项的时候，需要动态的改变我们的菜单值

  <el-row style="margin-bottom: 30px">
    <el-col :span="24">
      <el-radio-group v-model="ruleForm.type" label="菜单类型" @change="changeRadio">
        <el-radio-button v-for="(item, index) in state.typeName" :key="index" :label="index">{{ item }}</el-radio-button>
      </el-radio-group>
    </el-col>
  </el-row>
      
  <el-row v-if="ruleForm.type !== 0">
    <el-col :span="24">
      <el-form-item label="上级菜单" prop="pid">
        <el-tree-select v-model="ruleForm.pid" :data="state.menusData" check-strictly :render-after-expand="false" show-checkbox check-on-click-node :props="state.propsData" />
      </el-form-item>
    </el-col>
  </el-row>

import { cloneDeep } from 'lodash-es'
  
const state = reactive({
  typeName: ['顶级菜单', '菜单', '按钮'],
  menusData: [] as any,
  propsData: {
    label: 'name',
    children: 'children'
  }
})

const ruleForm = reactive({
  name: '',
  type: 0,
  icon: '',
  url: '',
  sort: 0,
  pid: null as any
})

const changeRadio = () => {
  watchType()
}

const watchType = () => {
  state.menusData = cloneDeep(props.menus)

  if (ruleForm.type === 1) {
    state.menusData.forEach((item: any) => {
      item.children.forEach((item2) => {
        item2.disabled = true
      })
    })
  }

  if (ruleForm.type === 2) {
    state.menusData.forEach((item: any) => {
      item.disabled = true
    })
  }
}

在我们获取所有 菜单 列表时，我们的数据结构是一个列表的形式

它并不符合我们的 树形选择器 结构，我们需要进行改造

  menus.forEach((item: any) => {
    item.value = item.id
    item.disabled = false

    switch (item.type) {
      case 0:
        item.children = []
        state.tableData.push(item)
        break
      case 1:
        item.children = []
        state.tableData.forEach((item2) => {
          if (item2.id === item.pid) {
            item2.children.push(item)
          }
        })
        break
      case 2:
        break
    }
  })

改造成如下的数据结构

至此我们就可以进行 上级菜单 的选择了

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

至此，我们 菜单管理 下的 上级菜单的选择 功能，处理完毕