1.級聯

1.1基本用法:

<el-cascader
    v-model="value"
    :options="options"
    @change="handleChange">
</el-cascader>

 1.2返回的欄位與預設的欄位不一致　　

defaultProps：{
children:"children"，
label："depNames"
}

2.樹型控制元件el-tree

 2.1 基本屬性

accordion是風琴式；  

設定props的disabled，

:props={label:'label2',children:"ch2",disabled:"dis2",isLeaf:"isleaf2"}　　

el-tree的基本用法：

<el-tree 
:data="data" 
:props="defaultProps"
@node-click="handleNodeClick"></el-tree>

2.2 點選時載入

<el-tree
  :props="props"
  :data="loadNode"
  @current-change="changeFolder"
  show-checkbox
  accordion
  ref=""
  node-key=""
  highlight-current
  >

</el-tree>

　2.3 動態載入

   lazy：是否懶載入子節點，需與 load 方法結合使用 | load: function(node, resolve)   

  設定預設展開:default-expanded-keys="[2,3]"  ;   

預設選中:default-checked-keys="[5]" ;使用這二個屬性需要設定node-key=""

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>

載入方法

獲取所有被選中的keys:this.$refs.tree.getCheckedKeys（）  |  getCheckedNodes（）

清空，setCheckedNodes([])

獲取最後一級：let tree=this.$refs.tree.getCheckedKeys(true);

resolve([]) 有內容的話，是返回的內容。其中node.data是當前的內容。

可提前告知tree某個節點是否為葉子節點：leaf:true有節點

  loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);
}

3.選項卡　

activeName="nameSelect",nameSelect是子元素的name的值

  <el-tabs :tab-position="tabPosition" style="height: 200px;" v-model="activeName" @tab-click="tabClick">
    <el-tab-pane label="使用者管理" name="name1">使用者管理</el-tab-pane>
  </el-tabs>

tabClick方法

tabClick（tab，event）{

}

動態增加和刪除卡片

參考：https://element.eleme.cn/#/zh-CN/component/tabs

4.麵包屑

separator-class可使用相應的iconfont

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
</el-breadcrumb>