Element el-cascader 级联选择器详解

点此查看全部文字教程、视频教程、源代码

1. 概述

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

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

2. 数据绑定

2.1 默认数据绑定

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

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

export default {
  data() {
    return {
      value: [],
      defaultOptions: [{
        value: '1',
        label: '山东',
        children: [{
          value: '2',
          label: '济南',
        },
        {
          value: '3',
          label: '泰安',
        }],
      }],
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

对应效果如下，注意绑定的值是一个数组，记录了选择路径每个节点的值。

2.2 指定绑定数据格式

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

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

  myOptions: [{
        id: '1',
        name: '山东',
        son: [{
          id: '2',
          name: '济南',
        },
        {
          id: '3',
          name: '泰安',
        }],
      }],
1
2
3
4
5
6
7
8
9
10
11
12

3. 常用功能

3.1 修改触发方式

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

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

3.2 增加清空按钮

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

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

效果如下：

3.3 可搜索

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

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

效果如下：

3.4 选中项只显示最后一级

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

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

效果如下：

3.5 可选中任意一级

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

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

效果如下：

3.6 面板样式

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

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

效果如下：

3.7 自定义节点内容

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

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

template中间的部分可以任意自定义，上面代码运行效果：

4. 动态加载下级

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

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

      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);
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

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

5. 小结

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

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