脚本宝典收集整理的这篇文章主要介绍了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>
以上是脚本宝典为你收集整理的1级联 2树tree 3选项卡 4面包屑全部内容,希望文章能够帮你解决1级联 2树tree 3选项卡 4面包屑所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。