vue 组件 模板如何去掉这个div？

Question

我需要去掉这一层div 怎么做到？
现在直接去掉，会报错。
这是组件递归产生elementUI菜单。
因为有这层div，导致elementUI 框架的样式 无法生效。。因为那个样式用了 > 符号，寻找直接子级。。

有这一层div，导致我写了下面难看的三条样式

Answer 1

vue 的函数式组件支持返回数组, 不需要 root 元素包裹.

export default {
  name: 'myMenu',
  functional: true,
  render(createElement, { props }) {
    return props.resultArray.map(item => {
      if (item.hasChildren) {
        return createElement(
          'el-submenu',
          {
            props: {
              index: item.resourceUrl.toString(),
            },
          },
          [
            createElement(
              'template',
              {
                slot: 'title',
              },
              [
                createElement('i', {
                  attrs: {
                    class: 'el-icon-menu',
                  },
                }),
                item.resourceName,
              ]
            ),
            createElement('myMenu', {
              props: {
                resultArray: item.children,
              },
            }),
          ]
        );
      }

      return createElement('el-menu-item', {
        props: {
          index: item.resourceUrl,
        },
      });
    });
  },
  props: {
    resultArray: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};

可能有打字错误, 你自己检查下

Answer 2

可以把循环放到父组件

<template>
  <el-menu router :default-active="$route.path" :collapse="$store.state.isCollapse">
    <submenu v-for="menu in $store.state.menuList" :menu="menu"/>
  </el-menu>
</template>

<template>

  <el-submenu :index="this.menu.uri" v-if="this.menu.children">
    <template slot="title">
      <i :class="this.menu.icon"></i>
      <span>{{this.menu.title}}</span>
    </template>
    <submenu v-for="childrenMenu in this.menu.children" :menu="childrenMenu"/>
  </el-submenu>

  <el-menu-item :index="this.menu.uri" v-else>
    <i :class="this.menu.icon"></i>
    <span>{{this.menu.title}}</span>
  </el-menu-item>

</template>

<script>
  export default {
    name: "submenu",
    props: ["menu"]
  }
</script>

Answer 3

你给div加一个class="el-menu-item-group"试试呢

Answer 4

看了下评论，笑死了，人家递归调用组件实现可能会有无限层级菜单的渲染，没几个是理解了问题的，我想问一下题主解决了吗，因为我现在跟你遇到的问题也是一摸一样，不想在组件重新写一边样式，太丑了

Answer 5

不能拿掉，一个模版必须要有一个root 标签。而且，有没有这个div，跟你的样式应该没关系，你再看看css是否引入成功吧

Answer 6

vue1.0可以拿掉，vue2.0强制要求必须有父级包裹。

Answer 7

@踏踏实实
收起功能里的css 样式官方就这样写的

Answer 8

vue的template模板是必须保证只能有一个顶级标签，你把div标签和任意一个template标签拿掉应该就行了

Answer 9

拿不掉，你可以换一种寻找那个标签的方法

Answer 10

试试 删除 div，将 template 改为 div

Answer 11

template中必须有且仅有一个根节点，你的这个elementui套的结构不对 你看看官方文档

Answer 12

template中必须有一个根节点，应该是elementUI 组件样式写错了

Answer 13

不要独立一个template,还是乖乖的把他放在el-memu下面吧,我就是这样做的

Answer 14

你把第二个template去掉，然后把它里面的v-for="(item,index) in resultArray"放在第一个template里面。因为template单组件必须要有一个父节点div，就是template下面必须有个div包作为父级，再写其他代码，所以你的那个div不能去掉。如果还有问题，那就把这个div放在第二个template后面试下。你去看看template的代码格式。

Answer 15

从功能上来讲，你这个组件是个菜单，并且你是在el-menu的基础上实现的，为何你要把el-menu这个节点写在父组件当中？菜单组件就应该封装玩所有菜单功能，你这样会产生el-menu依赖，如果要更换菜单的实现或者整体样式或者el-element对el-menu升级，这样做是很麻烦的事情

Answer 16

无法做到的，

Answer 17

div里面包裹的template标签，vue默认的是template里包裹的元素必须有一个根节点，你如果必须把div拿掉，那么建议你更改它里面的template标签，将此标签换一个

Answer 18

这个简单问题引来这么多人

Answer 19

不是，你这个结构就。。。
试试把循环那层的template换div，去掉中间那层div吧

Answer 20

动态更新数据渲染给菜单不行吗？
你这样强行把一套UI模板拆分到不同组件里像是耍流氓。

Answer 21

似乎没有解决这个问题

Answer 22

看看这个，可能会有些灵感 https://juejin.cn/post/686856...

Answer 23

没有什么样式是手写不出来的。如果有，那就继续提高自己的姿势水平。

Answer 24

我也碰到你这个问题了，怎么解决的啊，分享下呗