quasar 实现vue根组件放两个标签

yarn add vue-fragment

import { Plugin } from 'vue-fragment';

Vue.use(Plugin);

<template>
  <fragment>
    <q-tr v-show="parent.expand">
      <q-td :auto-width="true">
        <q-btn
          dense
          round
          flat
          v-if="menu.children"
          :icon="menu.expand ? 'mdi-minus' : 'mdi-plus'"
          @click="toggleExpand(menu)"
        />
      </q-td>
      <q-td :style="paddingLeft">{{ menu.name }}</q-td>
      <q-td :auto-width="true">
        <q-icon :name="menu.icon" color="t-grey" />
      </q-td>
      <q-td :auto-width="true">{{getDictLabel(menuType,menu.menuType)}}</q-td>
      <q-td class="ellipsis" key="url">
        <div class="text-left" style="white-space: normal;">{{ menu.url }}</div>
      </q-td>
      <q-td class="ellipsis" key="component">{{ menu.component }}</q-td>
      <q-td :auto-width="true">{{ menu.sortNo }}</q-td>
      <q-td :auto-width="true">
        <div>
          <q-btn flat round dense color="primary" icon="edit" @click.stop="edit(menu)">
            <q-tooltip>编辑</q-tooltip>
          </q-btn>
          <q-btn flat round dense color="primary" icon="add" @click.stop="addChild(menu)">
            <q-tooltip>添加</q-tooltip>
          </q-btn>
          <btn-del label="删除" @confirm="del(menu)" />
        </div>
      </q-td>
    </q-tr>
    <menu-item v-for="child in menu.children" :key="child.id" :menu="child" :level="level+1" :parent="menu"/>
  </fragment>
</template>

<script>
import { getter, formatter, getDictLabel } from 'boot/dictionary';

export default {
  name: 'menu-item',
  components: {},
  props: {
    menu: {
      type: Object,
      required: true,
    },
    parent: {
      type: Object,
      required: false,
      default: () => ({ expand: true }),
    },
    level: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      menuType: formatter('menuType'),
      icons: getter('icon'),
    };
  },
  watch: {},
  computed: {
    paddingLeft() {
      return {
        paddingLeft: `${(this.level) * 40}px`,
      };
    },
  },
  methods: {
    addChild(menu) {
      this.$emit('addChild', menu);
    },
    edit(menu) {
      this.$emit('edit', menu);
    },
    del(menu) {
      this.$emit('del', menu);
    },
    getDictLabel,
    toggleExpand(menu) {
      this.$set(menu, 'expand', !menu.expand);
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="stylus"></style>