Avue.js创建表格树菜单(vue组件通信---子传父(自定义事件$emit(eventName,data)))

关注Avue表单设计器的使用： 【Avue表单设计器的使用技巧】

关注Avue企业级开发应用官方源代码: 官方源代码

话说代码示例: 

   (1) 父菜单表格： 自定义

   

<！--父表格菜单模板 -->
<template>
  <basic-container>
    <div class="avue-crud"> <!-- 申明样式为avue-crud-->
      <el-form :inline="true"> <!-- el-form表单标签-->
        <el-form-item> <!-- 定义表格的每一项表单项： -->
          <el-button v-if="permissions.sys_menu_add" icon="el-icon-plus" type="primary"
                     @click="addOrUpdateHandle(false)">
            添加
          </el-button>  <!-- 表单项 按钮-->
        </el-form-item>
      </el-form> <!-- 表单元素结束-->

      <el-table <!--定义avue-crud中的表格元素：该表格元素为树状表格 -->
        border
        v-loading="loading"
        :data="menuList"  // data属性
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildrens'}"> // tree-props配置属性,children与hasChildrens
        <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="180"></el-table-column> // 定义表格的列
        <el-table-column prop="icon" label="图标" align="center" width="100">
          <template slot-scope="scope">
            <i :class="scope.row.icon"/>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"></el-table-column>
        <el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="type" label="类型" width="80" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type === '0'">菜单</el-tag>
            <el-tag type="info" v-if="scope.row.type === '1'">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="keepAlive" label="缓冲" width="80" align="center">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.keepAlive === '0'">关闭</el-tag>
            <el-tag type="success" v-if="scope.row.keepAlive === '1'">开启</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
        <!-- 定义表格的操作列 -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> 
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-plus"
              @click="addOrUpdateHandle(false,scope.row.id)"
              v-if="permissions.sys_menu_add">添加
            </el-button>
            <el-button type="text"
                       icon="el-icon-edit"
                       @click="addOrUpdateHandle(true,scope.row.id)"
                       v-if="permissions.sys_menu_edit">修改
            </el-button>
            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-if="permissions.sys_menu_del">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加与修改的弹窗表格组件，addOrUpdateVisible该值控制该表格组件的显
 隐,refreshDataList刷新数据列表方法时,执行getList 方法-->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></table-form>
    </div>
  </basic-container>
</template>

<script>
  import {delObj, fetchMenuTree} from '@/api/admin/menu' // 需要的数据API接口
  import TableForm from './menu-form'  // 子组件，(添加与修改)弹窗
  import {mapGetters} from 'vuex' 

  export default { // export导出语法
    name: "Menu",
    components: {TableForm}, // 申明子组件
    data() { // 组件需要的各数据配置项
      return {
        addOrUpdateVisible: false,
        // 遮罩层
        loading: true,
        // 菜单表格树数据
        menuList: [], 
        // 菜单树选项
        menuOptions: [],
      };
    },
    created() {
      this.getList();  // vue实例化时,执行getList()方法,初始化相关数据
    },
    computed: {
      ...mapGetters(['permissions']), 
    },
    methods: {
      addOrUpdateHandle(isEdit, id) { // 打开添加或者修改弹窗时,执行该方法
        this.addOrUpdateVisible = true // 设置子组件显示
        this.$nextTick(() => { // andOrUpdate为子组件的索引名称，父组件通过this.$refs调用组/件addOrUpdate的方法init(isEdit,id)
          this.$refs.addOrUpdate.init(isEdit, id) // 父组件调用子组件的方法,初始化子组件相关数据
        })
      },
      getList() { // 初始化父组件相关数据
        this.loading = true;
        fetchMenuTree(false, -1, this.$store.state.user.userInfo.tenantId).then(response => {
          this.menuList = response.data.data
          this.loading = false;
        });
      },
     // 执行删除的处理逻辑
      handleDelete(row) {
        this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delObj(row.id);
        }).then(() => {
          this.getList();
          this.$message.success('删除成功')
        }).catch(()=>{})  // catch(()=>{})  为避免点击取消按钮时，confirm报错
      }
    }
  };
</script>

(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>
    </div>
  </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>

效果如下: