一个基于vue和element-ui的省市县三级地址联动插件

wl-address

#简介 这是一个基于elementUi的el-select组件的省市县三级地址联动插件,使用本地化数据,无接口依赖。 el-select

在线演示 快速上手

npm i wl-address --save

npm i wl-address -S

import wlAddress from 'wl-address'

Vue.use(wlAddress)

使用

<template> <wlAddress class="my-wl-address" :type="address_mode" :address.sync="address_data"></wlAddress> </template> <script> export default { name: "app", data() { return { address_mode: "default", // default普通 cascader级联 address_data: "" // 选中地址 }; }, methods: { changeAddressMode() { this.address_mode = this.address_mode == "default" ? "cascader" : "default"; } } }; </script> 文档

序号 参数 说明 类型 可选值 默认值
1 size 输入框尺寸 String medium/small/mini -
2 address 绑定所选地址数据的字段。格式要求:[{"code":"130000","name":"河北省"},{"code":"130200","name":"唐山市"},{"code":"130203","name":"路北区"}] String - -
3 type 三个下拉框联动模式和一个下拉框级联模式 String default/cascader default
4 disabled 是否禁用 Boolean - false
5 clearable 是否可清除选项 Boolean - false
6 filterable 是否可搜索 Boolean - false
7 separator cascader模式选项分隔符 String - "/"
8 showAllLevels 输入框中是否显示选中值的完整路径 Boolean - true
版本记录

0.2.3 增加一些配置参数,cascader模式时filterable无法触发筛选函数

0.2.2 修复级联模式高度无限制的错误

0.2.1 发布,增加为两个模式:三个下拉框联动模式和一个下拉框级联模式

0.1.0 初次发布,0依赖的省市县三级地址插件

Customize configuration

See Configuration Reference.

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。