[Vue2]AntDesignVue基于Select封装「多选 + 二级级联+ 可自定义添加item 组件」

在一个下拉选择框中，一个branch对应多个编译命令option, option1和option2是每个branch都固定拥有的选项，同时支持多选，例如最后选择的结果如下：

{
	"branch1": ["option1", "option2", "option31", "option41"]，
    "branch2": ["option1", "option2", "option32", "option42"]，
    "branch2": ["option1", "option2", "option33", "option43"],
    ......
}

ui示意图如下

第一反应都是去官网看看有没有现成的轮子可用，但官方给出的组件功能还是不够强大，需要基于官方组件进行二次封装。

doit-ui-web基于AntDesignVue封装了很多业务常用的组件

http://my.h5house.com/component/select/two_cascader.html

在这里找到了一个最贴近业务的组件，只是可惜少了一个自定义添加item的功能，而且doit-ui-web文档中并未。

那就基于AntDesignVue自己封装吧…

.ant-cascader-select-drop {
  display: flex;
  z-index: 100;
}
.ant-cascader-select-drop .ant-list-something-after-last-item .ant-spin-container > .ant-list-items > .ant-list-item:last-child {
  border-bottom: none;
}
.ant-cascader-select-drop .ant-select-dropdown-content {
  width: 100%;
  display:flex;
}
.ant-cascader-select-drop .ant-select-dropdown-content .ant-col:first-child {
  min-width: 120px;
}
.ant-cascader-select-drop .ant-select-dropdown-content .ant-col + .ant-col {
  border-left: 1px solid #e8e8e8;
  flex: 1;
  min-width: 220px;
}
.ant-cascader-select-drop .ant-select-dropdown-content .ant-col:last-child li{
  justify-content: flex-start;
}
.ant-cascader-select-drop .ant-select-dropdown-content .ant-col:last-child li .ant-checkbox-wrapper{
  margin-right: 12px;
}
.ant-cascader-select-drop .ant-list-items .ant-list-item {
  padding-left:12px;
  padding-right:12px;
  cursor: pointer;
}
.ant-cascader-select-drop .ant-list-items .ant-list-item > span {
  white-space: nowrap;
}
.ant-cascader-select-drop .ant-list-footer .ant-tag {
  margin-left: 12px;
  cursor: pointer;
}
.ant-cascader-select-drop .ant-list-footer .ant-input {
  margin-left: 12px;
  width: calc(100% - 24px)!important;
}
.ant-cascader-select-drop .ant-list-footer .ant-input + .ant-input-suffix{
  margin-right: 6px;
}
.ant-cascader-select-drop .ant-list-footer .ant-input + .ant-input-suffix i{
  color: #1890ff;
}
.ant-cascader-select-drop .ant-list-items .ant-list-item:hover, .ant-cascader-select-drop .ant-list-items .ant-list-item.active {
  color: #1890ff;
}

.ant-cascader-select-drop .ant-list-items .ant-list-item:hover i, .ant-cascader-select-drop .ant-list-items .ant-list-item.active i{
  color: #1890ff;
}
.ant-cascader-select-drop .ant-list-items .ant-list-item i{
  font-size: 10px;
  color: #7d8292;
  margin-left: 6px;
}

import CascaderSelect from './CascaderSelect'
// component style
import './index.css'
export default CascaderSelect