vue select 实现地址选择
时间: 2023-08-09 17:09:20 浏览: 95
要实现地址选择,可以使用 Vue Select 插件结合一个地址数据源。以下是一个简单的示例:
```html
<template>
<div>
<label>选择地址:</label>
<v-select
v-model="selectedAddress"
:options="addressList"
label="name"
:reduce="address => address.id"
placeholder="请选择地址"
></v-select>
</div>
</template>
<script>
import Vue from 'vue';
import vSelect from 'vue-select';
Vue.component('v-select', vSelect);
export default {
data() {
return {
selectedAddress: null,
addressList: [
{
id: 1,
name: '中国',
children: [
{
id: 101,
name: '北京',
children: [
{ id: 10101, name: '朝阳区' },
{ id: 10102, name: '海淀区' },
{ id: 10103, name: '丰台区' },
],
},
{
id: 102,
name: '上海',
children: [
{ id: 10201, name: '黄浦区' },
{ id: 10202, name: '徐汇区' },
{ id: 10203, name: '长宁区' },
],
},
{
id: 103,
name: '广东',
children: [
{ id: 10301, name: '广州市' },
{ id: 10302, name: '深圳市' },
{ id: 10303, name: '珠海市' },
],
},
],
},
],
};
},
};
</script>
```
在上面的示例中,我们将 Vue Select 组件作为地址选择器,并将地址数据源 `addressList` 绑定到 `options` 属性上。`label` 属性指定了显示在下拉菜单中的文本,`reduce` 属性指定了选项对象的唯一标识符(这里使用 `id` 属性)。当用户选择一个选项时,`v-model` 指令将选项对象的引用保存在 `selectedAddress` 变量中。