Element UI学习3--Cascader 级联选择器

约定不等于承诺〃 2023-01-03 04:16 628阅读 0赞

1、基础用法

1、默认 click 触发子菜单

  1. <div class="block">
  2.      <span class="demonstration">默认 click 触发子菜单</span>
  3.          <el-cascader v-model="value" :options="options" @change="handleChange">
  4.           </el-cascader>
  5. </div>
  7. <script>
  8. export default { 
  9.     data(){ 
  10.         return{ 
  11.             value:[],
  12.             options:[
  13.                 { 
  14.                     value:'zhejiang',
  15.                     label:'浙江',
  16.                     children:[
  17.                         { 
  18.                             value:'hangzhou',
  19.                             label:'杭州',
  20.                             children:[
  21.                                 { 
  22.                                     value:'yuhang',
  23.                                     label:'余杭'
  24.                                 },
  25.                                 { 
  26.                                     value:'xiaoshan',
  27.                                     label:'萧山'
  28.                                 },
  29.                                 { 
  30.                                     value:'binjiang',
  31.                                     label:'滨江'
  32.                                 },
  33.                                 { 
  34.                                     value:'gongshu',
  35.                                     label:'拱墅'
  36.                                 }
  37.                             ]
  38.                         },
  39.                         { 
  40.                             value:'ningbo',
  41.                             label:'宁波',
  42.                             children:[
  43.                                 { 
  44.                                     value:'jiangbei',
  45.                                     label:'江北'
  46.                                 },
  47.                                 { 
  48.                                     value:'zhenhai',
  49.                                     label:'镇海'
  50.                                 },
  51.                                 { 
  52.                                     value:'beilun',
  53.                                     label:'北仑'
  54.                                 }
  55.                             ]
  56.                         }
  57.                     ]
  58.                 },
  59.                 { 
  60.                     value:'jiangxi',
  61.                     label:'江西',
  62.                     children:[
  63.                         { 
  64.                             value:'shangrao',
  65.                             label:'上饶',
  66.                             children:[
  67.                                 { 
  68.                                     value:'poyang',
  69.                                     label:'鄱阳'
  70.                                 },
  71.                                 { 
  72.                                     value:'yugan',
  73.                                     label:'余干'
  74.                                 },
  75.                                 { 
  76.                                     value:'yushan',
  77.                                     label:'玉山'
  78.                                 },
  79.                                 { 
  80.                                     value:'wannian',
  81.                                     label:'万年'
  82.                                 },
  83.                                 { 
  84.                                     value:'wuyuan',
  85.                                     label:'婺源'
  86.                                 }
  87.                             ]
  88.                         }
  90.                     ]
  91.                 }
  92.             ]
  93.         }
  94.     },
  95.     methods:{ 
  96.         handleChange(value){ 
  97.             console.log(value)
  98.         }
  99.     }
  100. }
  101. </script>

如图：
在这里插入图片描述
2、属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

  1. <div class="block">
  2.             <span class="demonstration">默认 click 触发子菜单</span>
  3.             <el-cascader v-model="value" :options="options" @change="handleChange" :show-all-levels="false">
  4.             </el-cascader>
  5.         </div>

如图：
在这里插入图片描述
3、通过props.expandTrigger可以定义展开子级菜单的触发方式。

  1. <div class="block">
  2.             <span class="demonstration">hover 触发子菜单</span>
  3.             <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange">
  4.             </el-cascader>
  5.         </div>

如图：
在这里插入图片描述

2、多选

1、默认显示所有Tag
可通过 props.multiple = true 来开启多选模式

  1. <div class="block">
  2.             <span class="demonstration">默认显示所有Tag</span>
  3.             <el-cascader :options="options" :props="props" clearable>
  4.             </el-cascader>
  5.         </div>
  7. <script>
  8. export default { 
  9.     data(){ 
  10.         return{ 
  11.             props:{ multiple:true},
  12.             options:[{ 
  13.                 value: 1,
  14.                 label: '浙江',
  15.                 children:[{ 
  16.                     value: 2,
  17.                     label: '杭州',
  18.                     children:[
  19.                         {  value: 3, label: '余杭' },
  20.                         {  value: 4, label: '拱墅' },
  21.                         {  value: 5, label: '萧山' }
  22.                     ]
  23.                 },
  24.                 { 
  25.                     value: 6,
  26.                     label: '宁波',
  27.                     children:[
  28.                         {  value: 7, label: '江北' },
  29.                         {  value: 8, label: '镇海' },
  30.                         {  value: 9, label: '北仑' }
  31.                     ]
  32.                 }
  33.                 ]
  34.             },
  35.             { 
  36.               value: 10,
  37.               label: '江西',
  38.               children:[{ 
  39.                   value: 11,
  40.                   label: '上饶',
  41.                   children:[
  42.                     {  value: 12, label: '鄱阳' },
  43.                     {  value: 13, label: '余干' },
  44.                     {  value: 14, label: '婺源' },
  45.                     {  value: 15, label: '玉山' }
  46.                   ]
  47.               },
  48.               { 
  49.                   value: 16,
  50.                   label: '南昌',
  51.                   children:[
  52.                     {  value: 17, label: '青山湖' },
  53.                     {  value: 18, label: '红谷滩' },
  54.                     {  value: 19, label: '高新' },
  55.                     {  value: 20, label: '向塘' }
  56.                   ]
  57.               }
  58.               ]  
  59.             }
  60.             ]
  61.             }
  62.             }
  63.             }

如图：
在这里插入图片描述
2、折叠展示Tag
使用collapse-tags来折叠Tag

  1. <div class="block">
  2.             <span class="demonstration">折叠展示Tag</span>
  3.             <el-cascader :options="options" :props="props" clearable collapse-tags>
  4.             </el-cascader>
  5.         </div>

如图：
在这里插入图片描述

3、选择任意一级选项

1、单选选择任意一级选项
可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。

  1. <div class="block">
  2.             <span class="demonstration">单选选择任意一级选项</span>
  3.             <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
  4.         </div>

如图：
在这里插入图片描述
2、多选选择任意一级选项

  1. /div> -->
  2.          <div class="block">
  3.             <span class="demonstration">多选选择任意一级选项</span>
  4.             <el-cascader :options="options" :props="{ multiple: true,checkStrictly: true }" clearable></el-cascader>
  5.         </div>

如图;
在这里插入图片描述

4、自定义节点内容

可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，
scoped slot会传入两个字段 node 和 data，
分别表示当前节点的 Node 对象和数据。

  1. <el-cascader :options="options">
  2.             <template slot-scope="{ node, data }">
  3.                <span>{
  4.    { data.label }}</span>
  5.                <span v-if="!node.isLeaf"> ({
  6.    { data.children.length }}) </span>
  7.             </template>
  8.         </el-cascader>

如图：
在这里插入图片描述

5、级联面板

级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。

  1. <el-cascader-panel :options="options"></el-cascader-panel>

如图：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，628人围观）

还没有评论，来说两句吧...

相关阅读