Build a Multiple Choices Cascader by ant-design-vue
5390 ワード
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, here is the earliest demo in codesandbox. I am not sure if the demo would be always able to visit.
The latest version is in here.
So, here is the earliest code:
App.vue
import MultipleCascader from './components/MultipleCascader'
export default {
name: 'app',
components: {
MultipleCascader
}
}
MultipleCascader.vue
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
}
}
}