-
学习内容
1.el-cascade的使用, 其中v-model对应的是数组，options中的key值固定，如label,value,children,disabled
2.@change方法的方法参数对应选择的级联的value数组
3.:props="{expandTrigger:'hover'}"触碰选项可展示出子选项，无需点击
4.clearable实现清空数据
5.:show-all-levels='false'实现只显示叶子节点值
6.:props="{multiple:true}"实现可以多选多个叶子节点
7.collapse-tags选中多个时实现折叠功能
8.filterable实现搜索功能
9.slot-scope="{node,data}" 和 node.isLeaf实现自定义级联菜单
10.el-cascade-panel展示级联面板 -
代码效果图
-
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<!-- el-cascade的v-model返回的是数组，options的key值固定 -->
<el-cascader v-model='value' :options='options' @change='handleChange'></el-cascader>
<!-- :props="expandTrigger:'hover'"当鼠标点入option，就会弹出下一级的选项，无需手动点击 -->
<el-cascader v-model='value' :options='options' @change='handleChange' :props="{expandTrigger:'hover'}"></el-cascader>
<!-- clearable可清空 -->
<el-cascader v-model='value' :options='options' @change='handleChange' :props="{expandTrigger:'hover'}" clearable></el-cascader>
<!-- 仅显示最后一级 -->
<el-cascader v-model='value' :options='options' @change='handleChange' :props="{expandTrigger:'hover'}" clearable :show-all-levels='false'></el-cascader>
<!-- 多选 -->
<el-cascader v-model='mulValue' :options='options' @change='handleChange' :props='{expandTrigger:"hover",multiple:true}' clearable :show-all-levels='true'></el-cascader>
<!-- 多选+折叠 -->
<el-cascader v-model='mulValue' :options='options' @change='handleChange' :props='{expandTrigger:"hover",multiple:true}' clearable :show-all-levels='true' collapse-tags></el-cascader>
<!-- 可搜索 -->
<el-cascader v-model='mulValue' :options='options' @change='handleChange' :props="{expandTrigger:'hover',multiple:true}" clearable :show-all-levels='true' :collapse-tags='false' filterable></el-cascader>
<!-- 自定义节点内容 -->
<el-cascader v-model='mulValue' :options='options' @change='handleChange' :props='{expandTrigger:"hover",multiple:true}' clearable :show-all-levels='true' :collapse-tags='false' filterable>
<template slot-scope="{node,data}">
<span>{{data.label}}</span>
<!-- node.isLeaf意思是是叶子节点 -->
<span v-if='!node.isLeaf'>({{data.children.length}})</span>
</template>
</el-cascader>
<!-- 级联面板 -->
<el-cascader-panel :options='options'></el-cascader-panel>
</div>
</body>
</html>
<script>
let vm = new Vue({
el:'#app',
data:{
value:[],
mulValue:[],
options:[
{label:'指南',value:'zhinan',children:[
{label:'设计原则',value:'shejiyuanze',children:[
{label:'一致',value:'yizhi'},
{label:'反馈',value:'fankui'},
{label:'效率',value:'xiaolv'},
{label:'可控',value:'kekong'},
]},
{label:'导航',value:'daohang',children:[
{label:'侧向导航',value:'cexiangdaohang'},
{label:'顶部导航',value:'dingbudaohang'}
]}
]},
{label:'组件',value:'zujian',disabled:true,children:[]}
]
},
methods:{
handleChange(value){
console.log(value)
console.log(this.value)
}
}
})
</script>
<style>
</style>
- 官网地址：element-ui官网