【小趴菜前端实习日记1】

前端前辈大大的要求：

一、后台框架：element-ui + <router-view>匹配路由

使用element-ui的布局容器布局：


<router-view>放在main的位置
home.vue:

二级路由配置：

二、封装侧边栏（结合el-menu进行二次封装）

在页面home.vue引入了组件slideBar，由于slideBar侧边栏里的菜单项的条目和层级数是不确定的，我们进行了二次封装使菜单项根据传入的数据递归渲染

1.slideBar.vue:

slideBar是父组件，slideBarItem是子组件，父亲传入具体的barList值给儿子进行渲染

<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b" router>
      <slide-bar-item :barList="barList"></slide-bar-item>
    </el-menu>

  </div>
</template>

<script>
import slideBarItem from './slideBarItem.vue';
export default {
  components:{
    slideBarItem
  },
  data(){
    return{
      activeIndex: '',
      barList:[
                {
                    id:1,
                    label:'老大',
                    link:'/menu1',
                    children:[
                        {
                            id:2,
                            label:'老大的大儿子',
                            link:'/submenu1',
                            address:"2-1",
                            children:[]
                        },
                        {
                            id:3,
                            label:'老大的二儿子',
                            link:'/submenu2',
                            address:"2-2"
                        }
                    ]
                },
                {
                    id:4,
                    label:'老二',
                    link:'/menu2'
                },
                {
                    id:5,
                    label:'老三',
                    link:"/menu3"
                }
            ],
    }
  },
  props:{
 
  },
  methods: {
     
    }
}
</script>

<style>

</style>

2.slideBarItem.vue

在子组件中，不光要接收父组件传过来的barList值，同时在模板中调用自身（也需要引入注册和使用），通过v-if和v-else判断是否具有子项进行条件渲染,使用 ？.语法，如果对象的属性值不存在，这个表达式将返回undefined，不会抛出错误

vue中用template标签包裹循环渲染列表

在 Vue 中使用 标签而不是 <div> 标签来包裹和循环渲染列表有几个好处。主要原因是 <template> 标签作为模板点位符，可帮助我们包裹元素，但在循环过程中 template 标签不会被渲染到页面，使用template而不是div标签，不会在最终的渲染中生成额外的 DOM 元素，因此可以保持 DOM 结构的简洁和干净。

<template>
    <div>
        <template v-for="(item) in barList" >
            <el-submenu :index="item.link" v-if="item?.children?.length > 0" :key="item.id" >
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{ item.label }}</span>
                </template>
                <slide-bar-item :barList="item.children"></slide-bar-item>
            </el-submenu>
            <div v-else :key="item.id">
                <el-menu-item :index="item.link" :key="item.id">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{ item.label }}</span>
                </el-menu-item>
            </div>
        </template>
    </div>

</template>

<script>
import slideBarItem from './slideBarItem'
export default {
    name:'slide-bar-item',
    props: {
        barList: {
            type: Array,
            required: true,
            default: () => {
                return []
            }
        }
    },
    components:{
        slideBarItem
    }

}
</script>

<style></style>

三、筛选对象属性方法

这是我本来搜到的方法……
row是一个对象，去除里面的content和available属性

结果老大一句代码就搞定了啊哈哈：

不说了，去复习es6的方法了……