V-cascade
🍭 Wow, such a beautiful cascade selector. view on Github
// html
<v-cascade
v-model="locationModal"
:data="location"
:title="['省份','城市','区县']"
addClass="cascade-location"
@success="locationSuccess"
@cancel="cancel"
>
</v-cascade>
// js
import
{ locationData }
from './data/location'
data () {
return {
location: locationData, // 地区数据
locationModal: false // 地区选择器
}
}
methods: {
locationSuccess (data) {
console.log(data)
// data: {
// path: ['510000',510300],
// pathName: ['四川省','自贡市']
// }
},
cancel () {
console.log('cancel')
}
}
// html
<v-cascade
scrollable
v-model="jobModal"
:data="job"
:title="['职称','职称']"
addClass="cascade-job"
@success="jobSuccess"
@cancel="cancel"
>
</v-cascade>
// js
import
{ jobData }
from './data/job'
data () {
return {
job: jobData, // 职称数据
jobModal: false, // 职称选择器
}
}
methods: {
jobSuccess (data) {
console.log(data)
// data: {
// path: ['17',1703],
// pathName: ['记者系列','记者']
// }
},
cancel () {
console.log('cancel')
}
}
// html
<v-cascade
filterable
v-model="locationSearchModal"
:data="locationSearch"
:title="['省份','城市','区县']"
placeholder="请输入要查找的内容"
addClass="cascade-location-search"
@on-query-change="queryChange"
@success="locationSearchSuccess"
@cancel="cancel"
>
</v-cascade>
// js
import
{ locationData }
from './data/location'
data () {
return {
locationSearch: locationData, // 地区数据
locationSearchModal: false, // 地区选择器
}
}
methods: {
locationSearchSuccess (data) {
console.log(data)
// data: {
// path: ['510000',510300],
// pathName: ['四川省','自贡市']
// }
},
queryChange (val) {
console.log(val)
// return search input value
}
cancel () {
console.log('cancel')
}
}
// html
<v-cascade
filterable
remote
:data="remoteData"
:remote-method="remoteMethod"
:loading="remoteLoading"
:autoFocus="false"
v-model="remoteModal"
noFoundStr="没有找到搜索内容，点击确认按钮使用自定义内容"
:title="['远程搜索']"
addClass="cascade-remote"
@success="RemoteSuccess"
@cancel="cancel"
>
</v-cascade>
// js
data () {
return {
remoteModal: false, // 远程选择器
remoteLoading: false, // 远程loading
remoteData: [
{
'key': 'default_data_1',
'label': 'default_data_1'
},
{
'key': 'default_data_2',
'label': 'default_data_2'
},
{
'key': 'default_data_3',
'label': 'default_data_3'
},
{
'key': 'default_data_4',
'label': 'default_data_4'
},
{
'key': 'default_data_5',
'label': 'default_data_5'
},
{
'key': 'tip',
'label': 'search U.S. states with input'
}
] // 远程默认数据
}
}
methods: {
RemoteSuccess (data) {
console.log(data)
// data: {
// path: ['Hawaii'],
// pathName: ['Hawaii']
// }
},
cancel () {
console.log('cancel')
}
remoteMethod (query) {
let self = this
this.remoteLoading = true
// simulate api call
setTimeout(function () {
var remoteMockData = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
var remoteFormatData = []
self.remoteLoading = false
remoteFormatData = remoteMockData.map(item => {
// format the data structure
return {
'key': item,
'label': item
}
})
self.remoteData = remoteFormatData.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1)
}, 500)
}
}