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

2022-04-21 08:00:15 阅读：185 来源： 互联网

标签：node resolve 选项卡 tree children 面包屑节点加载

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>

标签：node,resolve,选项卡,tree,children,面包屑,节点,加载
来源： https://www.cnblogs.com/lxq3280/p/16169104.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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