树形菜单和卡片弹出的做法

最新推荐文章于 2024-09-17 10:07:04 发布

hat-ing

最新推荐文章于 2024-09-17 10:07:04 发布

阅读量90

点赞数

分类专栏： vue心得文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/ating_ing/article/details/131922307

版权

vue心得专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文展示了如何在Vue.js应用中实现树形菜单选择上级菜单，使用treeselect组件处理接口返回的数据，并转换成合适结构。同时，文章还涵盖了菜单类型的radiogroup选择以及图标小卡片的el-popover组件的使用，提供了图标选择功能。

摘要由CSDN通过智能技术生成

1、先来几张结果图

2、树形菜单的实现代码

 <el-col :span="24">
                <el-form-item label="上级菜单" prop="parentId">
                  <!-- normalizer就是转换菜单数据结构，把这个对象的menuId转成id，menuName转成name类似的操作 -->
                  <treeselect
                    v-model="form.parentId"
                    :options="menuOptions"
                    :normalizer="normalizer"
                    :show-count="true"
                    placeholder="选择上级菜单"
                  />
                </el-form-item>
              </el-col>
              <!-- 这里定义不同菜单类型对应的label不一样，就可以进行点击的时候不同的操作 -->
              <el-col :span="24">
                <el-form-item label="菜单类型" prop="menuType">
                  <el-radio-group v-model="form.menuType">
                    <el-radio label="M">目录</el-radio>
                    <el-radio label="C">菜单</el-radio>
                    <el-radio label="F">按钮</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

这里的menuOption实际上就是接口返回的数据处理成合适的结构

相关事件代码：

/** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      };
    },

3、小卡片效果代码

              <!-- 图标小卡片弹窗的代码 -->
              <el-col :span="24" v-if="form.menuType != 'F'">
                <el-form-item label="菜单图标" prop="icon">
                  <!-- 这个就是小组件---弹出框 -->
                  <!-- placement="bottom-start"就是组件的出现位置 -->
                  <el-popover
                    placement="bottom-start"
                    width="460"
                    trigger="click"
                    @show="$refs['iconSelect'].reset()"
                  >
                    <!-- 写好的组件调用 -->
                    <IconSelect
                      ref="iconSelect"
                      @selected="selected"
                      :active-icon="form.icon"
                    />
                    <el-input
                      slot="reference"
                      v-model="form.icon"
                      placeholder="点击选择图标"
                      readonly
                    >
                      <!-- 图标显示的地方svg-icon  :icon-class="form.icon"动态绑定样式 如果有的话就是显示你选择的图标在首部 -->
                      <svg-icon
                        v-if="form.icon"
                        slot="prefix"
                        :icon-class="form.icon"
                        style="width: 25px"
                      />
                      <!-- 如果没有选择标签就是显示原始的样式即prefix首部放大镜图标，el-input__icon和slot是搭配使用的 -->
                      <i
                        v-else
                        slot="prefix"
                        class="el-icon-search el-input__icon"
                      />
                    </el-input>
                  </el-popover>
                </el-form-item>
              </el-col>

具体情况具体分析，提供一个参考哈