Element el-cascader 级联选择器详解

女爷i 2022-09-09 12:51 794阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 数据绑定
 *   *  2.1 默认数据绑定
     *  2.2 指定绑定数据格式
 *  3. 常用功能
 *   *  3.1 修改触发方式
     *  3.2 增加清空按钮
     *  3.3 可搜索
     *  3.4 选中项只显示最后一级
     *  3.5 可选中任意一级
     *  3.6 面板样式
     *  3.7 自定义节点内容
 *  4. 动态加载下级
 *  5. 小结

# 1. 概述 #

级联选择器用途比较广泛，例如选择人员所属的单位，可以从总公司-分公司-部门-子部门这样级联选择下来。

如果自己去实现一个级联选择器，实际上是难度较大的，Element提供了一个功能相当完善的级联选择器，本篇文章就进行一个详细的介绍。

# 2. 数据绑定 #

## 2.1 默认数据绑定 ##

级联选择器默认会绑定一个数组，节点的显示文本和值分别对应`label`、`value`属性，节点的后代对应`children`属性。示例代码如下：

默认数据绑定,选中值{
       {value}}
        <el-cascader v-model="value" :options="defaultOptions"></el-cascader>

export default {
        
      data() {
        
        return {
        
          value: [],
          defaultOptions: [{
        
            value: '1',
            label: '山东',
            children: [{
        
              value: '2',
              label: '济南',
            },
            {
        
              value: '3',
              label: '泰安',
            }],
          }],
        }
      }
    }

对应效果如下，注意**绑定的值是一个数组，记录了选择路径每个节点的值**。  
![在这里插入图片描述][d40cc0ee435b46b9a9b1864e4e77e0b8.png_pic_center]

## 2.2 指定绑定数据格式 ##

如果后端接口已开发完毕，后端返回的数据格式是固定的，也可以通过`props`参数指定绑定数据的格式，代码如下，将节点文本、节点值绑定的属性改为了`id`和`name`。

指定绑定属性
        <el-cascader v-model="value" :options="myOptions" :props="{label:'name',value:'id',children:'son' }"></el-cascader>

myOptions: [{
        
            id: '1',
            name: '山东',
            son: [{
        
              id: '2',
              name: '济南',
            },
            {
        
              id: '3',
              name: '泰安',
            }],
          }],

# 3. 常用功能 #

## 3.1 修改触发方式 ##

默认情况下，需要点击上一级的选项，才能展开下一级。通过修改expandTrigger参数可以实现悬停展开效果。

修改触发方式，默认为click点击触发,可以修改为hover悬停触发
        <el-cascader v-model="value" :options="defaultOptions" :props="{ expandTrigger: 'hover' }"></el-cascader>

## 3.2 增加清空按钮 ##

通过设置`clearable`，增加一个清空按钮，点击该按钮可清空选中项。

增加清空按钮
        <el-cascader v-model="value" :options="defaultOptions" clearable></el-cascader>

效果如下：  
![在这里插入图片描述][2eb273d48b7f4a3da176e0858af5be17.png_pic_center]

## 3.3 可搜索 ##

通过为el-cascader设置`filterable`属性，即可轻松启用搜索功能。

可搜索
        <el-cascader v-model="value" :options="defaultOptions" filterable></el-cascader>

效果如下：  
![在这里插入图片描述][23b10d38bb6248c48ddd3c174843aced.png_pic_center]

## 3.4 选中项只显示最后一级 ##

当级别较多时，显示全部的级别会显得很杂乱，我们可以设置`:show-all-levels="false"`来控制el-cascader只显示最后一级别。

只显示最后1级
        <el-cascader v-model="value" :options="defaultOptions" :show-all-levels="false"></el-cascader>

效果如下：  
![在这里插入图片描述][2276f02fc8254b8589d674a52474e6c0.png_pic_center]

## 3.5 可选中任意一级 ##

有时候，我们想选中不是最后一级的节点，可以通过`checkStrictly`参数来实现。

可选中任意1级
        <el-cascader v-model="value" :options="defaultOptions" :props="{ checkStrictly: 'true' }"></el-cascader>

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_12_color_FFFFFF_t_70_g_se_x_16_pic_center]

## 3.6 面板样式 ##

默认为下拉框的样式，也可以完整显示为一个面板，使用`l-cascader-panel`标签即可。

面板样式：
        <el-cascader-panel v-model="value" :options="defaultOptions"></el-cascader-panel>

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]

## 3.7 自定义节点内容 ##

可以通过插槽自定义节点的内容，为节点添加图标、修改字体、修改颜色。

自定义节点内容
        <el-cascader v-model="value" :options="defaultOptions">
          <template slot-scope="{ data }">
            <span style="color:red;">{
       { data.label }}</span>
          </template>
        </el-cascader>

template中间的部分可以任意自定义，上面代码运行效果：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_14_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 4. 动态加载下级 #

有时候节点数量很多，一次性加载速度会很慢，此时可以选择动态的加载下一级别。

动态加载下级
        <el-cascader :props="myProps"></el-cascader>

myProps: {
        
            lazy: true,
            lazyLoad(node, resolve) {
        
              console.log(node);
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              let nodes = [];
              if (node.level == 0) {
        
                nodes.push({
        
                  label: '山东',
                  value: 1
                });
              } else if (node.level == 1) {
        
                nodes.push({
        
                  label: '济南',
                  value: 2
                });
              }
              resolve(nodes);
            }
          }

解释下上面的代码，通过`lazy:true`启用动态加载，每次点击父节点会出发lazyLoad方法，并将节点数据`node`传递进来。  
我们根据node.level判断当前是第几个级别，如果是第0级则返回包含山东的数组，如果是第1级则返回包含济南的数组。  
最后的resolve函数是关键，会将数组的元素解析为当前父节点的子节点。

注意在实际项目开发中，我们可以根据node.data来获取节点绑定的数据信息，从而向后端查询当前节点的子节点数组。

# 5. 小结 #

el-cascader提供了灵活的功能，快捷的实现方式，在级联选择时非常好用。

相比于使用多个下拉框的方式，级联选择器节省了屏幕空间，且可以支持任意多个级别，无疑是更好的选择。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[d40cc0ee435b46b9a9b1864e4e77e0b8.png_pic_center]: /images/20220829/f8c8c8c517bf4aa5acef75ed697dc2df.png
[2eb273d48b7f4a3da176e0858af5be17.png_pic_center]: /images/20220829/f7d3a25dbb2e43fb9eb5f096dea606e1.png
[23b10d38bb6248c48ddd3c174843aced.png_pic_center]: /images/20220829/e0d0b5af84df46f5a012630d0c4b9271.png
[2276f02fc8254b8589d674a52474e6c0.png_pic_center]: /images/20220829/1e92e12b1de94617aeaf1841c6990d46.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_12_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/6d2ae208f1ff4a8aa51039bb233dfd76.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/07bcfb6e8d03424391cc8b44526b43b5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_14_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/d432eb2497d74882932a295ce1a0346f.png