Element el-cascader 级联选择器详解 女爷i 2022-09-09 12:51 754阅读 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
还没有评论,来说两句吧...