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

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

## 1、基础用法 ##

1、默认 click 触发子菜单

<div class="block">
         <span class="demonstration">默认 click 触发子菜单</span>
             <el-cascader v-model="value" :options="options" @change="handleChange">
              </el-cascader>
    </div>

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

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

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

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

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 2]

## 2、多选 ##

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

<div class="block">
                <span class="demonstration">默认显示所有Tag</span>
                <el-cascader :options="options" :props="props" clearable>
                </el-cascader>
            </div>

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

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

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 4]

## 3、选择任意一级选项 ##

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

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

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

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

如图;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 6]

## 4、自定义节点内容 ##

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

<el-cascader :options="options">
                <template slot-scope="{ node, data }">
                   <span>{
       { data.label }}</span>
                   <span v-if="!node.isLeaf"> ({
       { data.children.length }}) </span>
                </template>
            </el-cascader>

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 7]

## 5、级联面板 ##

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

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

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/bd86160caece41658d2c848286074646.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/d5fd148055134a6cadf9f54a212ac071.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/3938c60f0a3b4001a9f6abfdb59080ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/239a46b8b28a4c918684d7461013668e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221119/0324563634f54a47aa921088858c1d2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221119/d924c373e08a46938ee08cacc357cb3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221119/257a97d460434cec9cb6263f89d5cf29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221119/2ca09c92a373441893c443fdbe224b89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221119/543206126ec249d787bf44bede47f420.png