【vue】记一个复杂选择器的实现思路

项目选择器的示意图如下：

• 需要支持单选、多选；
• 支持一级、二级、三级的选择；
• 可以删除已选标签；
• 选择的标签改变，页面的筛选结果马上更新；

  

实现思路

要将组件的逻辑实现，要考虑数据的流向，对于这个组件来说，最重要的数据是”选中的标签“

组件结构：

将选择器分为三个组件，分别是主入口index组件，单个选择器组件，已选标签块组件

分类组件组件：

props

属性名	类型	说明
page_id	number	页面id
defaultValue	object	默认选中项
value	object	指定选中项

@事件

事件名	类型	说明
change	（object，page_id)	选中的标签改变后

内部data 属性名 类型 说明 labels object[] 已选标签 { type:"语言", parentIndex：[1,2,3] //每层的index label：“存储/RDBMS”， value：“业务领域/游戏” }

内部事件

单个选择器组件

组件的分类：单选|多选、一层|二层|三层

单个组件的props

属性名	类型	说明
defaultValue	object	默认选中项
multiple	boolean	false
value	object	指定选中项

事件 事件名|类型 |说明 change|object[] |已选标签

已选标签组件

props

属性	类	说明
valuE	object[]	选中的label
defalut	object[]	同上

	{
	  type:"语言",
	  parentIndex：[1,2,3] //每层的index
	  label：“存储/RDBMS”，
	  value：“业务领域/游戏”
	} 

使用的“轮子”

以下组件可以搜索得到

• 标签可用ant-design的tag组件
• 气泡框使用ant-design的popover组件
• 多级选项的左右列可以使用ant-design的menu组件
• 三层选项可以使用瀑布包vue-waterfall2