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

菜单管理页面

引言

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

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

菜单管理

上一节，我们将 菜单表 处理完毕，并且能够通过接口，来获取到所有的菜单

现在我们将前端 菜单管理 的页面 进行搭建

这里先将最终页面展示出来

新增

首先是上方的 新增 按钮，是我们添加菜单的主要方式

<template>
    <el-tooltip class="item" effect="dark" content="新增" placement="top">
      <el-button size="mini" type="success" @click="addFunc">
        <svg-icon iconName="icon-shizi" color="#fff"></svg-icon>
      </el-button>
    </el-tooltip>
</template>


<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'

const state = reactive({
  addDialog: false,
})

const addFunc = () => {
  state.addDialog = true
}

</script>

可以看到会有一个点击方法，点击后，会弹出一个 dialog 来进行添加

弹框内容如下：

注意上级菜单使用的是，ElementPlus 提供的 TreeSelect 树形选择 器

非常的好用，效果如下

代码如下

<template>
    <el-dialog destroy-on-close v-model="state.addDialog" title="新增" width="500px">
      <AddDialog @close="closeFunc" />
    </el-dialog>
</template>

<script setup lang="ts">

import AddDialog from './addDialog.vue'

</script>

<template>
  <div>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" status-icon label-position="left">
      <el-row style="margin-bottom: 30px">
        <el-col :span="24">
          <el-radio-group v-model="ruleForm.type" label="菜单类型">
            <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>
        <el-col :span="24">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="url 地址" prop="url">
            <el-input v-model="ruleForm.url" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级菜单" prop="pid">
            <el-tree-select v-model="ruleForm.pid" :data="data" check-strictly :render-after-expand="false" show-checkbox check-on-click-node />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单图标">
            <el-input v-model="ruleForm.icon" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单排序">
            <el-input v-model="ruleForm.sort" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button type="text" @click="cancelFunc">取消</el-button>
      <el-button type="primary" @click="submitFunc(ruleFormRef)">确认</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, defineEmits } from 'vue'

const emits = defineEmits(['close'])

const state = reactive({
  typeName: ['菜单', '按钮']
})

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

const rules = reactive({
  name: { required: true, message: '不能为空', trigger: 'blur' },
  url: { required: true, message: '不能为空', trigger: 'blur' },
  pid: { required: true, message: '不能为空', trigger: 'blur' }
})


const data = [
]

const cancelFunc = () => {
  emits('close', false)
}
const submitFunc = async (formEl) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits('close', true)
    } else {
      console.log('error')
    }
  })
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: end;
  align-items: center;
}
</style>

上面的 data 的代码量太多，这里就不贴了，具体的代码可以查看 TreeSelect 树形选择器 的代码示例

此时我们的新增页面就搭起来了

表格页面

这里先将代码图片进行粘贴

可以注意到，table 上，有一个关键的属性

就是 :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

它的一个作用就是，如果我们传入的 table 数据中，行数据中，若存在 children 属性的话，则会添加一个类似于 树 的展开形式，点击后就会进行展开。

而且也离不开另一个关键 属性 row-key="name"

此时我们的 菜单页面 初步搭建完毕

总结

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

完成了，菜单管理页面 的一个初步搭建。