Preface
I need to make a cascader which can support multiple choices. However, I didn't find any ui which supports that until 2018.11.18. That was a little pity.
Main
I check the element-ui
and find multiple cascader was in toDoList while ant-design
refuse to support that directly. Maybe because they have already implemented TreeSelect. Here is what TreeSelect
looks like:
Almost the result I want except the ui. It doesn't look like a cascader but a tree.
Anyway, I built a multiple cascader component based on select and cascader in ant-design-vue
. Here is the result:
The principle is easy. I use the input
in select
and hide the popup. And then I hide the input
in cascader
and show the popup. So, MultipleCascader is equal to input
in select
plus popup in cascader
and use transform
to let them stay together.
Talking about the event, you have to listen and change the data to show correctly. That is a little troublesome.
Anyway, the latest version is in here
So, here is the earliest code:
App.vue
<template>
<div id="app" class="app"><MultipleCascader /></div>
</template>
<script>
import MultipleCascader from './components/MultipleCascader'
export default {
name: 'app',
components: {
MultipleCascader
}
}
</script>
<style scoped></style>
MultipleCascader.vue
<template>
<div class="multi_cascader">
<a-cascader
size="large"
class="multi_cascader__cascader"
:popupVisible="cascaderPopupVisible"
:popupClassName="'multi_cascader__cascader_popup' + timestamp"
changeOnSelect
expandTrigger="hover"
:options="cascaderOptions"
:fieldNames="{ label: 'label', value: 'id', children: 'children' }"
v-model="cascaderValues"
ref="cascader"
:showSearch="{ cascaderFilter }"
@change="cascaderChange"
></a-cascader>
<a-select
size="large"
class="multi_cascader__select"
dropdownClassName="hide"
mode="multiple"
:value="selectValues"
allowClear
placeholder="Please select"
:options="selectOptions"
@focus="cascaderPopupVisible = true"
@deselect="deleteOption"
@change="selectChange"
@search="selectSearch"
></a-select>
</div>
</template>
<script>
export default {
name: 'MultipleCascader',
data: function() {
return {
timestamp: Date.now(),
selectOptions: [],
selectValues: [],
cascaderPopupVisible: false,
cascaderValues: [],
cascaderOptions: [
{
id: 1,
value: '1',
label: '1',
children: [
{ id: 1.1, value: 1.1, label: '1-1' },
{
id: 1.2,
value: 1.2,
label: '1-2',
children: [
{ id: 1.21, value: 1.21, label: '1-2-1' },
{ id: 1.22, value: 1.22, label: '1-2-2' }
]
}
]
},
{ id: 2, value: 2, label: '2' }
]
}
},
mounted() {
document.addEventListener('click', this.hideCascaderPopup)
},
destroyed() {
document.removeEventListener('click', this.hideCascaderPopup)
},
methods: {
cascaderChange(values, options) {
// you may have different logic with the selected option, here I just want the last one.
let targetValue = values.slice(-1).pop()
let targetOption = options.slice(-1).pop()
let selectedValIndex = this.selectValues.indexOf(targetValue)
if (selectedValIndex >= 0) {
this.selectValues.splice(selectedValIndex, 1)
this.selectOptions.splice(selectedValIndex, 1)
} else {
this.selectValues.push(targetValue)
this.selectOptions.push(targetOption)
}
},
deleteOption(value) {
let selectedValIndex = this.selectValues.indexOf(value)
this.cascaderChange([value], [this.selectOptions[selectedValIndex]])
},
selectChange(values, vNodes) {
if (values.length === 0) {
this.selectValues = []
this.selectOptions = []
}
},
selectSearch(keyword) {
let searchInput = this.$refs.cascader.$el.querySelector('input')
if (searchInput) {
searchInput.value = keyword
searchInput.dispatchEvent(new Event('input'))
}
},
cascaderFilter(inputValue, path) {
return path.some(
option =>
option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
)
},
hideCascaderPopup(event) {
let cascaderPopup = document.querySelector(
'.multi_cascader__cascader_popup' + this.timestamp
)
let isClickCascaderPopup =
cascaderPopup && cascaderPopup.contains(event.target)
if (isClickCascaderPopup) {
return
}
this.cascaderPopupVisible = false
}
}
}
</script>
<style scoped>
.multi_cascader {
height: 100vh;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.multi_cascader__select {
width: 50%;
margin-top: 0;
margin-bottom: auto;
transform: translate(0, -100%);
}
.multi_cascader__cascader {
width: 50%;
margin-top: auto;
margin-bottom: 0;
opacity: 0;
}
</style>
<style>
/* global style*/
.hide {
display: none;
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。