激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

動態(tài)渲染element-ui導航菜單

發(fā)布時間：2024-03-07 11:51:56 瀏覽量：212次

需求背景

在vue中正常寫死的使用 el-menu 組件是沒有問題的。但是如果數據是動態(tài)的時候，并且菜單數據的層級嵌套的也不知道。這個時候在使用該組件時就會遇到一個問題。

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">處理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作臺</template>
    <el-menu-item index="2-1">選項1</el-menu-item>
    <el-menu-item index="2-2">選項2</el-menu-item>
    <el-menu-item index="2-3">選項3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">選項4</template>
      <el-menu-item index="2-4-1">選項1</el-menu-item>
      <el-menu-item index="2-4-2">選項2</el-menu-item>
      <el-menu-item index="2-4-3">選項3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>
</el-menu>

如上面這一段代碼，在與el-menu-item組件同級的還有el-submenu組件，而el-submenu組件則渲染的是當前節(jié)點的子級數據。然而在你根本不知道數據哪一個節(jié)點會出現子級數據時，在template中就無法使用類似v-for這樣的循環(huán)來渲染數據。

此時就想了，能不能在el-menu-item外面嵌套一層標簽，如果我們發(fā)現數據又子級數據，就讓這個數據使用el-submenu組件。乍聽上去好像可行，然而是不行的，最起碼數據嵌套多少層你不知道，也就不知道需要預設寫多少層。

此時又來靈感了，把el-submenu封裝一層，在封裝的組件里面再使用這個封裝的組件，這樣就會形成一個遞歸的效果，也就解決了層級嵌套的問題。

設想很美好，然而事實并不然，這套組件之間根本容不下其他任何組件或標簽

解決方案

其實想要的效果就是根據數據，在該渲染el-menu-item的地方渲染el-menu-item，在該渲染el-submenu的地方渲染el-submenu。如果這標簽是一堆字符串的話，我們使用一個函數的編寫方式不就可以解決所有的問題？有的，其實是vue里面的老api了。使用render函數來解決這個問題。

  • 首先我們創(chuàng)建一個menu文件，在該文件中使用render函數。
  • 封裝menu
export default {
	props: {
  	menuData: {
    	type: Array,
      default: () => ([])
    }
  },
  render() {
  	const menuItem = (item, index) => {
      const renderName = (item.children && item.children.length) ? 'submenu' : 'menuItem'
      const jx = {
        submenu: (function() {
          return (
            <el-submenu index={String(index)}>
              <template slot='title'>
                <img class='menu-m-icon' src={item.iconPath} style={imgStyle} />
                {item.name}
              </template>
              {
                listFn(item.children).map((t, i) => menuItem(t, `${index}-${i}`))
              }
            </el-submenu>
          )
        })(),
        menuItem: (
          <el-menu-item index={String(index)}>
            { item.name }
          </el-menu-item>
        )
      }
      return jx[renderName]
    }
    return (
      <el-menu>
        {this.menuData.map((t, index) => menuItem(t, index))}
      </el-menu>
    )
  }
}
  • 使用menu組件
<template>
  	<menu : menuData="menuData"></menu>
  </template>
<script>
      import menu from './menu'
      export default {
				components: { menu },
        data() {
        	return {
          	menuData: [
              { name: '項目一'， id: 1 },
              { name: '項目二'， id: 2, children: [
               { name: '項目2-1' },
               { name: '項目2-2',  children: [
                 { name: '項目2-2-1' }			
               ]}
               ] },
              { name: '項目三'， id: 3 },
            ]
          }
        }
			}
</script>

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定