border
v-loading="loading"
:data="menuList" // data属性
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildrens'}"> // tree-props配置属性,children与hasChildrens
// 定义表格的列
菜单
按钮
关闭
开启
添加
修改
删除
(2)子弹窗： 添加与修改弹窗
<style>
.customWidth{ <!-- 自定义弹窗的宽度 -->
width:30%;
</style>
<template>
<!-- 添加或修改菜单对话框 el-dialog模板类型 -->
<el-dialog :title="!form.menuId ? '新增' : '修改'"
:visible.sync="visible" customClass="customWidth">
<el-form ref="dataForm" :model="form" :rules="rules" label-width="80px"><!--表单的元素-->
<el-row> <!-- el-row行元素，自成行-->
<el-col :span="12"> <!-- 行中列 el-col-->
<el-form-item label="菜单类型" prop="type"> <!-- 列中包含的表单项 -->
<el-radio-group v-model="form.type" size="small">
<el-radio-button label="0">菜单</el-radio-button>
<el-radio-button label="1">按钮</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上级菜单">
<treeselect v-model="form.parentId"
:options="menuOptions"
:normalizer="normalizer"
:show-count="true"
placeholder="选择上级菜单"
</el-form-item>
</el-col>
</el-row>
<el-form-item label="图标" prop="icon" v-if="form.type === '0'">
<avue-icon-select v-model="form.icon" :icon-list="iconList"></avue-icon-select>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入菜单名称"/>
</el-form-item>
<el-form-item label="路由地址" prop="path" v-if="form.type !== '1'">
<el-input v-model="form.path" placeholder="请输入路由地址"/>
</el-form-item>
<el-form-item label="权限标识" prop="permission" v-if="form.type === '1'">
<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50"/>
</el-form-item>
<!-- el-row 行元素-->
<el-row>
<el-col :span="12">
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" :min="0"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="路由缓冲" prop="keepAlive" v-if="form.type !== '1'">
<el-radio-group v-model="form.keepAlive">
<el-radio-button label="0">否</el-radio-button>
<el-radio-button label="1">是</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 弹窗底部插槽footer-->
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="dataFormSubmit">确 定</el-button>
<el-button @click="visible = false">取 消</el-button>
</el-dialog>
</template>
<script>
import {addObj, fetchMenuTree, getObj, putObj} from '@/api/admin/menu' // 引入相关接口API
import Treeselect from "@riophae/vue-treeselect"
import iconList from '@/const/iconList'
import TableForm from './'
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
name: "Menu",
components: {Treeselect, TableForm}, // 引入两个组件
data() {
return {
// 遮罩层
loading: true,
// 菜单树选项
menuOptions: [],
// 是否显示弹出层
visible: false,
// 图标
iconList: iconList,
form: { // 表单绑定的字段属性
name: undefined,
path: undefined,
icon: undefined,
permission: undefined,
type: '0',
keepAlive: '0',
sort: 999,
tenantId:this.$store.state.user.userInfo.tenantId
// 表单校验
rules: {
name: [
{required: true, message: "菜单名称不能为空", trigger: "blur"}
sort: [
{required: true, message: "菜单顺序不能为空", trigger: "blur"}
path: [
{required: true, message: "路由地址不能为空", trigger: "blur"}
keepAlive: [
{required: true, message: "路由缓冲不能为空", trigger: "blur"}
permission: [
{required: true, message: "权限标识不能为空", trigger: "blur"}
methods: {
init(isEdit, id) {
if (id != null) {
this.form.parentId = id;
this.visible = true
this.getTreeselect();
this.$nextTick(() => { // 使用this.nextTick()方法作用，等待dom加载以后再来获取dom对象
this.$refs['dataForm'].resetFields()
if (isEdit) {
getObj(id).then(response => {
this.form = response.data.data
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
if (this.form.parentId === undefined) {
this.form.parentId = -1
if (this.form.menuId) {
putObj(this.form).then(data => {
this.$message.success('修改成功')
this.visible = false
this.form.menuId = ""
this.$emit('refreshDataList')
} else {
addObj(this.form).then(data => {
this.$message.success('添加成功')
this.visible = false
this.$emit('refreshDataList') // 子组件调用父组件刷新表格数据
/** 查询菜单下拉树结构 */
getTreeselect() {
fetchMenuTree(false,-1,this.$store.state.user.userInfo.tenantId).then(response => {
this.menuOptions = [];
const menu = {id: -1, name: '根菜单', children: []}; //定义常量
menu.children = response.data.data; // 为常量的children原始赋值
this.menuOptions.push(menu);
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
return {
id: node.id,
label: node.name,
children: node.children
</script>
效果如下:
标题form-create具有动态渲染、数据收集、校验和提交功能的表单生成器。http://www.form-create.com/
项目里因为表单较多 选择了动态创建表单
项目需要自定义表单，整个项目里面我觉得比较麻烦的是自定义表单部分跟后台对于数据结构的设计。
@form-create/element-ui UI框架版本 JSON串进行动态表单配置
引入form-create
import formCreate from "@form-create/element-ui
关于avue.js的使用：
最近在做的一个模块ota，主要业务就是增删改查，截止目前发博客的时候，统计了一下封装接口的数量达到了55个，然而在用到的过程中调用接口的次数比这个数字要多很多，项目封装的用到的一个UI框架叫avue.js，这个框架刚开始接触的时候觉得不是很好用，之前接触最多的是element UI，两者相比较，说实话，还是avue比较香，尤其是两者一起搭配使用，两者搭配挺好用的，推荐给大家avue官网https://avuejs.com/。avue的表格在使用上比较方便，一个简单的增删改查，加上
在「接口测试平台」专栏的《16 接口自动化 接口管理模块开发（五）中，将Ant Design Vue提供的ATable组件封装为可以编辑的表单组TableForm，本章就手把手教你如何将ATable封装成表单组件。
用于布局的容器组件，方便快速搭建页面的基本结构；
<el-container>:外层容器。当子元素中包含<el-header>或<el-footer>时，全部子元素回垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。
注意:<el-container&
需求：就是针对业务品种勾选的时候，可以影响子业务品种，父业务品种有着8种，而着8种父业务下，对应的子业务有着10几种，那么只有勾选父业务的时候，才显示对应的子业务！
需求2：就是父业务点击 X 的那个清除按钮的时候，需要清除掉自身的值，需要清除掉子业务选中的值
需求3：点击子业务点击 X 的那个清除按钮的时候，需要清除掉自身的值
需求4：父子业务改变的时候，下面还有数十种业务的改变，前提是需要先把选中的值清空
针对业务品种 这个东西，封装为一个组件的时候，那么由于是
Form.Item 中使用 valuePropName 来指定子节点的值的属性，例如Table的数据源为dataSource，Switch的数据源是checked
在Table的columns中定义需要表单控制的数据，render返回Form.Item
import { Button, Form, Input, Table } from 'antd'
import React, { useEffect } from 'react'
const About: React.FC = (props: any.
