根据NutUi 官网 文档提取出多级联动示例,直接可在vue 页面直接使用
<template>
<div>
<nut-cell
:show-icon="true"
title="请选择城市"
:desc="cityCustmer"
@click.native="openPicker">
</nut-cell>
<nut-picker :is-visible="isVisibleShow" :default-value-data="defaultValueData" title="请选择"
:list-data="custmerCityData" @close="closeSwitch"
@confirm="setChooseValueCustmer" @choose="updateChooseValueCustmer"
@close-update="closeUpdateChooseValueCustmer" />
</div>
</template>
<script>
const APIData = [
{
label: 1,
array: [
{
label: 1,
value: '朝阳区'
},
{
label: 2,
value: '海淀区'
},
{
label: 3,
value: '大兴区'
},
{
label: 4,
value: '东城区'
},
{
label: 5,
value: '西城区'
},
{
label: 6,
value: '丰台区'
}
]
},
{
label: 2,
array: [
{
label: 1,
value: '黄浦区'
},
{
label: 2,
value: '长宁区'
},
{
label: 3,
value: '普陀区'
},
{
label: 4,
value: '杨浦区'
},
{
label: 5,
value: '浦东新区'
}
]
}
];
export default {
name: 'CellPicker',
desc: '下拉选择组件',
props: {
curPicker: Array
},
data() {
return {
cityCustmer:'请选择',
isVisibleShow: false,
defaultValueData: null,
listData: [
[
{
label: 1,
value: '南京市'
},
{
label: 2,
value: '无锡市'
},
{
label: 3,
value: '海北藏族自治区'
},
{
label: 4,
value: '北京市'
},
{
label: 5,
value: '连云港市'
},
{
label: 6,
value: '浙江市'
},
{
label: 7,
value: '江苏市'
},
{
label: 8,
value: '大庆市'
},
{
label: 9,
value: '绥化市'
},
{
label: 10,
value: '潍坊市'
},
{
label: 11,
value: '请按市'
},
{
label: 12,
value: '乌鲁木齐市'
}
]
],
custmerCityData: [
[
{
label: 1,
value: '北京'
},
{
label: 2,
value: '上海'
}
]
]
}
},
mounted() {
},
methods: {
openPicker() {
this.defaultValueData = [this.listData[0][3]]
this.isVisibleShow = true
},
closeSwitch() {
this.isVisibleShow = false
},
setChooseValueCustmer(chooseData) {
console.log("setChooseValueCustmer",chooseData)
var str = chooseData.map(item => item.value).join('-');
this.cityCustmer = str;
// this.$emit('confirem', e)
},
closeUpdateChooseValueCustmer(self, chooseData) {
console.log("closeUpdateChooseValueCustmer", chooseData)
//此处模拟查询API,如果数据缓存了不需要再重新请求
setTimeout(() => {
let { label, value } = chooseData[0]
var resItems = APIData.find(item => item.label == label)
if (resItems && resItems.array.length) {
this.$set(this.custmerCityData, 1, resItems.array)
// 复原位置
self.updateChooseValue(self, 0, chooseData[0])
self.updateChooseValue(self, 1, chooseData[1])
}
}, 100)
},
updateChooseValueCustmer(self, index, resValue, cacheValueData) {
console.log("updateChooseValueCustmer", index, resValue, cacheValueData)
// 本demo为二级联动,所以限制只有首列变动的时候触发事件
if (index === 0) {
//此处模拟查询API,如果数据缓存了不需要再重新请求
let { label, value } = resValue
setTimeout(() => {
var resItems = APIData.find(item => item.label == label)
if (resItems && resItems.array.length) {
this.$set(this.custmerCityData, 1, resItems.array)
// 更新第二列位置
self.updateChooseValue(self, index + 1, this.custmerCityData[1][0])
}
}, 100)
}
}
}
}
</script>
<style lang="scss" scoped>
/deep/.nut-picker-control .nut-picker-cancel-btn {
color: #bebebe;
}
/deep/.nut-picker-control .nut-picker-confirm-btn {
color: #4e8dee;
}
</style>