antd vue json数据动态渲染导航

毛默默不吃鱼

已于 2022-02-15 09:08:05 修改

阅读量444

点赞数

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

于 2021-12-31 09:38:47 首次发布

本文链接：https://blog.csdn.net/qq_40869401/article/details/122249772

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

本文展示了使用Ant Design Vue库创建的非路由后台管理系统，包括布局组件和导航组件的实现。布局组件采用A-LAYOUT进行头部、侧边栏和主要内容区域的划分，支持动态添加和编辑标签页。导航组件则通过A-MENU和SUB-MENU实现多级菜单，动态响应用户的点击操作，并缓存导航历史。

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

antd vue 非路由的后台管理系统

布局组件

<template>
  <div >
      <a-layout>
          <a-layout-header>
              <div class="logo"></div>
          </a-layout-header>
          <a-layout>
            <a-layout-sider> <sub-nav/></a-layout-sider>
            <a-layout>
             <a-layout-content>
                 <a-tabs  v-model="activeKey" hide-add type="editable-card" @edit="onEdit" @tabClick="jump">
                   <a-tab-pane v-for="(pane,index) in panes" :key="index" :tab="pane.title" :closable="pane.closable">{{pane.title}}</a-tab-pane>
                 </a-tabs>
                 <!-- <div class="html" v-html=""></div> -->
                 <!-- 可以模板引入外部html -->
                 <div><iframe :src="htmlUrl"></iframe></div>
             </a-layout-content>
            </a-layout>
          </a-layout>
      </a-layout>
  </div>
</template>

<script>
import subNav from './subNav'
import {mapState} from 'vuex'
export default {
components:{subNav},
data() {
    return {
        activeKey: undefined,
      newTabIndex: 0,
    }
},
computed: {
    ...mapState({
        panes:(state)=>state.list,
        htmlUrl:(state)=>state.url
    })
},
methods: {
  callback(key) {
      console.log(key);
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    jump(i){
        let {valueObj} =this.panes[i].item.value
       this.$store.commit('setUrl',valueObj.src)
    },
    remove(targetKey) {
      let activeKey = targetKey;
      this.panes.splice(targetKey,1)
    },
},
}
</script>

<style>

</style>

导航组件

<template>
  <div>
      <div class="box"></div>
      <a-menu>
    <a-menu
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      @click="clickMenuItem"
    >
      <template v-for="item in list">
        <a-menu-item v-if="!item.children" :key="item.key" :title="item.title" :value="item">
          <a-icon type="pie-chart" />
          <span>{{ item.title }}</span>
        </a-menu-item>
        <sub-menu v-else :key="item.key" :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>

<script>
import { Menu } from 'ant-design-vue';
const SubMenu = {
  template: `
      <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <a-icon type="mail" /><span>{{ menuInfo.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.key" :title="item.title" :value="item">
            <a-icon type="pie-chart" />
            <span>{{ item.title }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.key" :menu-info="item" :title="item.title" :value="item"/>
        </template>
      </a-sub-menu>
    `,
  name: 'SubMenu',
  // must add isSubMenu: true
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
};
export default {
 components: {
    'sub-menu': SubMenu,
  },
  data() {
    return {
      collapsed: false,
      list: [],
     clickArr:[]
    };
  },
  created() {
      this.list=jssdk.dataJson.list
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    clickMenuItem(data){
        let itemUrl=''
        let isEqual=this.clickArr.some(item=>{
            if(!isEqual){
                this.clickArr.push(data)
            }
            itemUrl=data.item.value.itemUrl
            this.$store.commit('setPanes',this.clickArr)//缓存点击的导航item，layout里的panes
            this.$store.commit('setUrl',itemUrl)
        })
    }
  },
}
</script>

<style>

</style>