小编点评

## El Cascader Optimization for Multiple Backgrounds This document describes an optimization of the Element UI multiple background select component to allow selection of the last level and preserve the original functionality. **Overview:** * Multiple background selection is commonly used, but Element UI's multi-select component only allows selection of the last level. * This project aims to address this limitation by optimizing the component to support multiple backgrounds while maintaining the component's core functionality. **Key Points:** * The component will support multi-background selection. * The original selection behavior will be preserved. * The optimization focuses on achieving this while maintaining maintainability and preserving the component's core functionality. **Implementation:** * The component will be updated to use a custom `render` method. * The `render` method will handle the background selection logic and render the components accordingly. * The component will maintain its original props and functionality. **Optimization Goals:** * Allow multi-background selection. * Preserve the ability to select only the last item. * Maintain the component's core functionality and maintainability. **Additional Notes:** * The component currently supports the following props: * `visibleData` (array): Selected data for the component. * `expandTrigger` (string): Event that triggers sub-menu expansion. * `popperClass` (string): CSS class for the popover. * `props` (object): Configuration object for the component. * These props are the only supported props at the moment. * Some Element UI methods may require further optimization or testing. **Future Improvements:** * Consider implementing a custom `multiple` component that extends the base component. * Explore adding a toggle or checkbox for additional control over selection. * Address any known issues with other Element UI methods. **Conclusion:** By implementing these optimizations, we aim to create a more flexible and efficient multiple background select component that meets the requirements of modern web design and development.

正文

github地址：https://github.com/heyu3913/el-cascader-onlylast-mutiple

背景：

我们经常级联合选择器多选的需求，但是element UI提供的级联选择器并不能只多选最后一级，所以我考虑基于element UI的级联选择器优化一下，实现可以多选最后一级，并且尽量可以保留级联选择器原有功能。

DEMO地址：

https://heyu3913.github.io/el-cascader-onlylast-mutiple/dist/index.html (开梯子访问)

使用方法：

  下载依赖
  npm i el-cascader-onlylast-mutiple -S
  引入依赖
  import Cascader from  'el-cascader-onlylast-mutiple'
  使用依赖 具体可看本项目中App.vue
   <Cascader></Cascader>

参数：

参数	说明	类型	可选值	默认值
visibleData	选中项绑定值	array	-	-
options	可选项数据源，键名可通过 Props 属性配置	array
size	尺寸	string	medium / small / mini
placeholder	输入框占位文本	string	-	请选择
disabled	是否禁用	boolean	-	false
clearable	是否支持清空选项	boolean	-	false
showAllLevels	输入框中是否显示选中值的完整路径	boolean	-	false
collapseTags	多选模式下是否折叠Tag	boolean	-	false
popperClass	自定义浮层类名	string	-	-
props	配置选项，具体见下表	object	-	-

props配置选项

参数	说明	类型	可选值	默认值
expandTrigger	次级菜单的展开方式	string	click / hover	'click'
value	指定选项的值为选项对象的某个属性值	string	—	'value'
label	指定选项标签为选项对象的某个属性值	string	—	'label'
children	指定选项的子选项为选项对象的某个属性值	string	—	'children'
disabled	指定选项的禁用为选项对象的某个属性值	string	—	'disabled'

事件：

事件名称	说明	回调参数
change	当选中节点变化时触发	选中节点的值

tips:

目前只兼容了以上属性与方法，别的element中原有的方法并没有测试过，可能会出现意想不到的错误。如果有需求可以联系我 vx: iverson96i

更新：更加优雅的解决方案

点击查看