element组件的EXP

1.tree树形结构的使用

    后续补充吧 

10.tabs标签页的使用

     标签页主要是用来切换标题显示不同的内容,需要给tabs绑定一个v-model值 ,这个值对应显示的就是tab中绑定的name值.

使用上基本依靠于自身的tab-click事件,默认接收的就是tab这个组件对象.通过tab.name可以获取到这个值

举个例子:

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab) {
        console.log(tab.name)  //这个打印出就会点击的那个tab的name值
      }
    }
  };
</script>

但是最近项目中遇到这样的一种特殊结构  需要循环的去设置tabs 看清楚是tabs不是tab,所以这个使用就涉及到一个问题  循环出来的切换栏具有联动效果,这个是我们不想要的.废了千辛万苦,终于意识到是自己智障了 .最后发现之所具有联动效果是因为name值的设置.

so

<template>  <div>      <div v-for="item in 3" :key='item'>        <el-tabs type="border-card">            <el-tab-pane>                <span slot="label"> 我的行程</span>                我的行程            </el-tab-pane>            <el-tab-pane label="消息中心">消息中心</el-tab-pane>            <el-tab-pane label="角色管理">角色管理</el-tab-pane>            <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>        </el-tabs>      </div>    </div></template>

因为之前都是陷入误区 通过tab的name值进行判断显示的内容,比如name==1 我让它显示对应的数据 ,但是tab标签内,也是可以直接设置显示内容的.