1级联 2树tree 3选项卡 4面包屑

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>