UNPKG

vue3-select-linkage

Version:

vue3 下拉框联动组件

2,377 lines (2,364 loc) 42.5 kB
# vue 3.0 下拉框联动效果 ### 联动数据源 ```javascript [ { "name": "广州", "value": "广州", "child": [ { "name": "天河", "value": "天河", "child": [ { "name": "天河北", "value": "天河北" }, { "name": "黄村", "value": "黄村" } ] }, { "name": "番禺", "value": "番禺", "child": [ { "name": "石楼", "value": "石楼" }, { "name": "市桥东", "value": "市桥东" } ] } ] } ] ``` ### 用法 ### main.js 引入组件库 ```javascript import { createApp } from 'vue' import App from './App.vue' import 'vue3-select-linkage/lib/vue3-select-linkage.css' import Vue3SelectLinkage from 'vue3-select-linkage' createApp(App).use(Vue3SelectLinkage).mount('#app') ```javascript ```javascript <el-select :options="options" v-model:value="value" :fieldNames="fieldNames" /> ``` ### 参数说明 1、options 下拉数据源 2、value 默认选中值 数组格式 3、fieldNames 下拉数据源的key, value, child ### javascript 用法 ```javascript <template> <div> <div>子组件选择的值: {{ value }}</div> <VSelect :options="options" v-model:value="value" :fieldNames="fieldNames" /> </div> </template> <script> import { ref } from "vue"; const options = [ { name: "广州", child: [ { name: "天河", child: [ { name: "天河北", }, { name: "黄村", }, { name: "东圃", }, { name: "车陂", }, { name: "岑村", }, { name: "员村四横路", }, { name: "科韵路", }, { name: "棠下", }, { name: "沙河", }, { name: "员村二横路", }, { name: "珠江新城东", }, { name: "珠江新城中", }, { name: "员村", }, { name: "上社", }, { name: "龙口东", }, { name: "珠江新城西", }, { name: "石牌桥", }, { name: "龙口西", }, { name: "龙洞", }, { name: "东站", }, { name: "体育中心", }, { name: "东莞庄", }, { name: "粤垦", }, { name: "天河公园", }, { name: "汇景新城社区", }, { name: "天河南", }, { name: "天河客运站", }, { name: "天润路", }, { name: "五山", }, { name: "五山路口", }, { name: "沙太南", }, { name: "岗顶", }, { name: "体育西", }, { name: "燕塘", }, { name: "华景新城社区", }, { name: "长湴", }, ], }, { name: "番禺", child: [ { name: "石楼", }, { name: "市桥东", }, { name: "顺德碧桂园社区", }, { name: "石碁", }, { name: "亚运城", }, { name: "大石", }, { name: "大学城", }, { name: "华南", }, { name: "广州雅居乐", }, { name: "洛溪", }, { name: "星河湾社区", }, { name: "市桥南", }, { name: "厦滘", }, { name: "市桥北", }, { name: "祈福", }, { name: "市桥西", }, { name: "祈福中区", }, { name: "祈福新区", }, { name: "金山谷", }, { name: "华南碧桂园社区", }, { name: "钟村", }, { name: "南浦", }, { name: "沙湾", }, ], }, { name: "海珠", child: [ { name: "沥滘", }, { name: "广州大道南", }, { name: "南洲", }, { name: "江南大道", }, { name: "新港西", }, { name: "昌岗路", }, { name: "东晓南", }, { name: "中大", }, { name: "江南西", }, { name: "宝岗", }, { name: "下渡路", }, { name: "赤岗", }, { name: "江燕路", }, { name: "客村", }, { name: "工业大道北", }, { name: "工业大道南", }, { name: "滨江东", }, { name: "滨江中", }, { name: "滨江西", }, { name: "前进路", }, { name: "琶洲", }, { name: "鹭江", }, ], }, { name: "白云", child: [ { name: "金沙洲南", }, { name: "白云大道北", }, { name: "黄石", }, { name: "广花路", }, { name: "嘉禾望岗", }, { name: "龙归", }, { name: "同德围", }, { name: "金沙洲北", }, { name: "罗冲围", }, { name: "人和", }, { name: "南湖", }, { name: "白云大道南", }, { name: "三元里", }, { name: "永泰", }, { name: "新市", }, { name: "石井", }, { name: "黄边", }, { name: "江夏", }, { name: "机场路", }, { name: "桂花岗", }, { name: "京溪", }, { name: "同和", }, { name: "广园路", }, { name: "梅花园", }, { name: "广州大道北", }, ], }, { name: "越秀", child: [ { name: "盘福路", }, { name: "二沙岛", }, { name: "黄花岗", }, { name: "东山", }, { name: "东川路", }, { name: "东风东", }, { name: "杨箕", }, { name: "小北", }, { name: "大沙头", }, { name: "淘金", }, { name: "西门口", }, { name: "解放北", }, { name: "五羊新城", }, { name: "农讲所", }, { name: "海珠广场", }, { name: "北京路", }, { name: "环市东", }, { name: "解放南", }, { name: "建设路", }, { name: "共和路", }, { name: "麓景路", }, { name: "水荫路", }, ], }, { name: "花都", child: [ { name: "山前大道", }, { name: "美林湖", }, { name: "铁路西", }, { name: "旧区", }, { name: "炭步", }, { name: "狮岭", }, { name: "镜湖大道", }, { name: "新区", }, { name: "花东", }, { name: "建设北", }, { name: "花山", }, ], }, { name: "增城", child: [ { name: "永和", }, { name: "挂绿新城", }, { name: "荔城大道北", }, { name: "增江", }, { name: "新塘北", }, { name: "石滩", }, { name: "新塘南", }, { name: "广园东", }, { name: "荔城大道南", }, { name: "凤凰城", }, { name: "朱村", }, { name: "中新", }, ], }, { name: "荔湾", child: [ { name: "流花", }, { name: "东风西", }, { name: "黄岐", }, { name: "黄沙", }, { name: "环市西", }, { name: "盐步", }, { name: "西关", }, { name: "西村", }, { name: "坑口", }, { name: "龙溪大道", }, { name: "桥中", }, { name: "窖口", }, { name: "广钢新城", }, { name: "中山八", }, { name: "南岸路", }, { name: "花地湾", }, { name: "陈家祠", }, { name: "芳村", }, ], }, { name: "黄埔", child: [ { name: "萝岗", }, { name: "文冲", }, { name: "开发东区", }, { name: "开发西区", }, { name: "知识城", }, { name: "大沙地", }, { name: "开创大道", }, { name: "丰乐路", }, ], }, { name: "南沙", child: [ { name: "黄阁", }, { name: "东涌", }, { name: "金洲", }, { name: "大岗", }, { name: "蕉门河", }, { name: "南沙湾", }, { name: "明珠湾", }, ], }, { name: "从化", child: [ { name: "鳌头", }, { name: "温泉", }, { name: "街口中心区", }, { name: "太平", }, ], }, { name: "广州周边", child: [ { name: "清远", }, { name: "佛山", }, { name: "中山", }, { name: "其他", }, ], }, ], }, { name: "清远", child: [ { name: "清城区", child: [ { name: "凤城街道", }, { name: "东城街道", }, { name: "洲心街道", }, { name: "横荷街道", }, { name: "源潭镇", }, { name: "龙塘镇", }, { name: "石角镇", }, { name: "飞来峡镇", }, { name: "清远市高新技术产业开发区", }, { name: "清远市国营银盏林场", }, ], }, { name: "清新区", child: [ { name: "太和镇", }, { name: "太平镇", }, { name: "山塘镇", }, { name: "三坑镇", }, { name: "龙颈镇", }, { name: "禾云镇", }, { name: "浸潭镇", }, { name: "石潭镇", }, { name: "笔架林场", }, ], }, { name: "佛冈县", child: [ { name: "石角镇", }, { name: "水头镇", }, { name: "汤塘镇", }, { name: "龙山镇", }, { name: "高岗镇", }, { name: "迳头镇", }, ], }, { name: "阳山县", child: [ { name: "青莲镇", }, { name: "江英镇", }, { name: "杜步镇", }, { name: "七拱镇", }, { name: "太平镇", }, { name: "杨梅镇", }, { name: "大崀镇", }, { name: "小江镇", }, { name: "岭背镇", }, { name: "黄坌镇", }, { name: "黎埠镇", }, { name: "阳城镇", }, { name: "秤架瑶族乡", }, ], }, { name: "连山壮族瑶族自治县", child: [ { name: "永和镇", }, { name: "吉田镇", }, { name: "太保镇", }, { name: "禾洞镇", }, { name: "福堂镇", }, { name: "小三江镇", }, { name: "上帅镇", }, { name: "连山林场", }, { name: "禾洞农林场", }, ], }, { name: "连南瑶族自治县", child: [ { name: "三江镇", }, { name: "大麦山镇", }, { name: "寨岗镇", }, { name: "三排镇", }, { name: "涡水镇", }, { name: "大坪镇", }, { name: "香坪镇", }, ], }, { name: "英德市", child: [ { name: "英城街道", }, { name: "沙口镇", }, { name: "望埠镇", }, { name: "横石水镇", }, { name: "桥头镇", }, { name: "青塘镇", }, { name: "白沙镇", }, { name: "大站镇", }, { name: "西牛镇", }, { name: "九龙镇", }, { name: "含光镇", }, { name: "大湾镇", }, { name: "石灰铺镇", }, { name: "石牯塘镇", }, { name: "下太镇", }, { name: "波罗镇", }, { name: "横石塘镇", }, { name: "大洞镇", }, { name: "连江口镇", }, { name: "黎溪镇", }, { name: "水边镇", }, { name: "英红镇", }, { name: "东华镇", }, { name: "黄花镇", }, ], }, { name: "连州市", child: [ { name: "连州镇", }, { name: "星子镇", }, { name: "大路边镇", }, { name: "龙坪镇", }, { name: "西岸镇", }, { name: "保安镇", }, { name: "丰阳镇", }, { name: "东陂镇", }, { name: "九陂镇", }, { name: "西江镇", }, { name: "瑶安瑶族乡", }, { name: "三水瑶族乡", }, ], }, ], }, { name: "江门", child: [ { name: "台山市", child: [ { name: "台城镇", }, { name: "水步镇", }, { name: "四九镇", }, { name: "白沙镇", }, { name: "三合镇", }, { name: "冲蒌镇", }, { name: "斗山镇", }, { name: "都斛镇", }, { name: "赤溪镇", }, { name: "端芬镇", }, { name: "广海镇", }, { name: "海宴镇", }, { name: "汶村镇", }, { name: "深井镇", }, { name: "北陡镇", }, { name: "川岛镇", }, { name: "大江镇", }, ], }, { name: "新会区", child: [ { name: "今古州经济开发区", }, { name: "大泽镇", }, { name: "司前镇", }, { name: "罗坑镇", }, { name: "双水镇", }, { name: "崖门镇", }, { name: "沙堆镇", }, { name: "古井镇", }, { name: "三江镇", }, { name: "睦洲镇", }, { name: "小冈镇", }, { name: "牛湾镇", }, { name: "南坦镇", }, { name: "七堡镇", }, { name: "大鳌镇", }, { name: "城区", }, ], }, { name: "鹤山市", child: [ { name: "雅瑶镇", }, { name: "桃源镇", }, { name: "龙口镇", }, { name: "古劳镇", }, { name: "鹤城镇", }, { name: "共和镇", }, { name: "址山镇", }, { name: "宅梧镇", }, { name: "云乡镇", }, { name: "双合镇", }, { name: "合成镇", }, { name: "江门监狱", }, { name: "四堡林场", }, { name: "城区", }, ], }, { name: "江海区", child: [ { name: "外海镇", }, { name: "礼乐镇", }, { name: "城区", }, ], }, { name: "蓬江区", child: [ { name: "潮连镇", }, { name: "棠下镇", }, { name: "荷塘镇", }, { name: "杜阮镇", }, { name: "城区", }, ], }, { name: "开平市", child: [ { name: "沙塘镇", }, { name: "苍城镇", }, { name: "龙胜镇", }, { name: "大沙镇", }, { name: "马冈镇", }, { name: "塘口镇", }, { name: "赤坎镇", }, { name: "百合镇", }, { name: "蚬冈镇", }, { name: "金鸡镇", }, { name: "楼岗镇", }, { name: "东山镇", }, { name: "水井镇", }, { name: "月山镇", }, { name: "赤水镇", }, { name: "水口镇", }, { name: "翠山湖工业区", }, { name: "城区", }, ], }, { name: "恩平市", child: [ { name: "横陂镇", }, { name: "圣堂镇", }, { name: "良西镇", }, { name: "沙湖镇", }, { name: "牛江镇", }, { name: "君堂镇", }, { name: "大田镇", }, { name: "那吉镇", }, { name: "大槐镇", }, { name: "东成镇", }, { name: "城区", }, ], }, ], }, { name: "韶关", child: [ { name: "南雄市", child: [ { name: "百顺镇", }, { name: "邓坊镇", }, { name: "湖口镇", }, { name: "黄坑镇", }, { name: "江头镇", }, { name: "界址镇", }, { name: "澜河镇", }, { name: "帽子峰镇", }, { name: "南亩镇", }, { name: "水口镇", }, { name: "坪田镇", }, { name: "全安镇", }, { name: "乌迳镇", }, { name: "油山镇", }, { name: "珠玑镇", }, { name: "主田镇", }, { name: "古市镇", }, { name: "精细化工基地", }, { name: "城区", }, ], }, { name: "乐昌市", child: [ { name: "白石镇", }, { name: "北乡镇", }, { name: "大源镇", }, { name: "黄圃镇", }, { name: "九峰镇", }, { name: "廊田镇", }, { name: "两江镇", }, { name: "梅花镇", }, { name: "坪石镇", }, { name: "庆云镇", }, { name: "三溪镇", }, { name: "沙坪镇", }, { name: "五山镇", }, { name: "秀水镇", }, { name: "云岩镇", }, { name: "长来镇", }, { name: "河南镇", }, { name: "乐城镇", }, { name: "城区", }, ], }, { name: "仁化县", child: [ { name: "城口镇", }, { name: "大桥镇", }, { name: "董塘镇", }, { name: "扶溪镇", }, { name: "红山镇", }, { name: "黄坑镇", }, { name: "石塘镇", }, { name: "闻韶镇", }, { name: "长江镇", }, { name: "周田镇", }, { name: "城区", }, ], }, { name: "始兴县", child: [ { name: "隘子镇", }, { name: "城南镇", }, { name: "澄江镇", }, { name: "顿岗镇", }, { name: "罗坝镇", }, { name: "马市镇", }, { name: "深渡水瑶族乡", }, { name: "沈所镇", }, { name: "司前镇", }, { name: "太平镇", }, { name: "城区", }, ], }, { name: "翁源县", child: [ { name: "坝仔镇", }, { name: "官渡镇", }, { name: "江尾镇", }, { name: "龙仙镇", }, { name: "翁城镇", }, { name: "新江镇", }, { name: "周陂镇", }, { name: "铁龙林场", }, { name: "城区", }, ], }, { name: "新丰县", child: [ { name: "黄礤镇", }, { name: "回龙镇", }, { name: "马头镇", }, { name: "梅坑镇", }, { name: "沙田镇", }, { name: "遥田镇", }, { name: "城区", }, ], }, { name: "乳源瑶族自治县", child: [ { name: "必背镇", }, { name: "大布镇", }, { name: "大桥镇", }, { name: "东坪镇", }, { name: "桂头镇", }, { name: "洛阳镇", }, { name: "乳城镇", }, { name: "一六镇", }, { name: "游溪镇", }, { name: "天井山林场", }, { name: "乳阳林业局", }, { name: "城区", }, ], }, { name: "曲江区", child: [ { name: "马坝镇", }, { name: "樟市镇", }, { name: "韶关冶炼厂", }, { name: "沙溪镇", }, { name: "韶关钢铁集团有限公司", }, { name: "小坑镇", }, { name: "乌石镇", }, { name: "枫湾镇", }, { name: "罗坑镇", }, { name: "韶关十六冶金建设公司", }, { name: "白土镇", }, { name: "大塘镇", }, { name: "韶关发电厂", }, { name: "曲江区大宝山矿", }, ], }, { name: "武江区", child: [ { name: "重阳镇", }, { name: "西河片区", }, { name: "江湾镇", }, { name: "龙归镇", }, { name: "沙洲尾", }, { name: "西联镇", }, { name: "沐溪工业园", }, ], }, { name: "浈江区", child: [ { name: "东联片区", }, { name: "东河片区", }, { name: "犁市镇", }, { name: "花坪镇", }, { name: "乐园镇", }, { name: "五里亭", }, { name: "十里亭镇", }, { name: "南郊片区", }, { name: "城区", }, ], }, ], }, { name: "河源", child: [ { name: "和平县", child: [ { name: "阳明镇", }, { name: "彭寨镇", }, { name: "东水镇", }, { name: "林寨镇", }, { name: "热水镇", }, { name: "大坝镇", }, { name: "上陵镇", }, { name: "下车镇", }, { name: "贝墩镇", }, { name: "古寨镇", }, { name: "礼士镇", }, { name: "公白镇", }, { name: "合水镇", }, { name: "青州镇", }, { name: "浰源镇", }, { name: "优胜镇", }, { name: "城区", }, { name: "长塘镇", }, ], }, { name: "龙川县", child: [ { name: "老隆镇", }, { name: "四都镇", }, { name: "黄石镇", }, { name: "细坳镇", }, { name: "车田镇", }, { name: "贝岭镇", }, { name: "黎咀镇", }, { name: "上坪镇", }, { name: "丰稔镇", }, { name: "赤光镇", }, { name: "龙母镇", }, { name: "回龙镇", }, { name: "铁场镇", }, { name: "登云镇", }, { name: "通衢镇", }, { name: "鹤市镇", }, { name: "黄布镇", }, { name: "紫市镇", }, { name: "佗城镇", }, { name: "岩镇", }, { name: "新田镇", }, { name: "附城镇", }, { name: "义都镇", }, { name: "麻布岗镇", }, { name: "城区", }, { name: "田心镇", }, ], }, { name: "紫金县", child: [ { name: "紫城镇", }, { name: "附城镇", }, { name: "九和镇", }, { name: "上义镇", }, { name: "蓝塘镇", }, { name: "凤安镇", }, { name: "义容镇", }, { name: "古竹镇", }, { name: "临江镇", }, { name: "柏埔镇", }, { name: "敬梓镇", }, { name: "乌石镇", }, { name: "水墩镇", }, { name: "南岭镇", }, { name: "苏区镇", }, { name: "瓦溪镇", }, { name: "好义镇", }, { name: "中坝镇", }, { name: "龙窝镇", }, { name: "城区", }, { name: "黄塘镇", }, ], }, { name: "连平县", child: [ { name: "元善镇", }, { name: "上坪镇", }, { name: "内莞镇", }, { name: "陂头镇", }, { name: "溪山镇", }, { name: "隆街镇", }, { name: "田源镇", }, { name: "油溪镇", }, { name: "忠信镇", }, { name: "高莞镇", }, { name: "大湖镇", }, { name: "三角镇", }, { name: "绣缎镇", }, { name: "城区", }, ], }, { name: "源城区", child: [ { name: "源南镇", }, { name: "埔前镇", }, { name: "高新技术开发区", }, { name: "城区", }, ], }, { name: "东源县", child: [ { name: "城区", }, { name: "仙塘镇", }, { name: "灯塔镇", }, { name: "骆湖镇", }, { name: "船塘镇", }, { name: "顺天镇", }, { name: "上莞镇", }, { name: "曾田镇", }, { name: "柳城镇", }, { name: "义合镇", }, { name: "蓝口镇", }, { name: "黄田镇", }, { name: "叶潭镇", }, { name: "黄村镇", }, { name: "康禾镇", }, { name: "锡场镇", }, { name: "新港镇", }, { name: "双江镇", }, { name: "涧头镇", }, { name: "半江镇", }, { name: "漳溪镇", }, { name: "新回龙镇", }, ], }, ], }, { name: "赣州", child: [ { name: "章贡", child: [ { name: "章贡", }, ], }, { name: "章江新区", child: [ { name: "章江新区", }, ], }, { name: "老城区", child: [ { name: "老城区", }, ], }, { name: "开发区", child: [ { name: "开发区", }, ], }, { name: "站北区", child: [ { name: "站北区", }, ], }, { name: "水东区", child: [ { name: "水东区", }, ], }, { name: "水西区", child: [ { name: "水西区", }, ], }, { name: "南康", child: [ { name: "南康", }, ], }, { name: "瑞金", child: [ { name: "瑞金", }, ], }, { name: "赣县", child: [ { name: "赣县", }, ], }, { name: "信丰", child: [ { name: "信丰", }, ], }, { name: "宁都", child: [ { name: "宁都", }, ], }, { name: "于都", child: [ { name: "于都", }, ], }, { name: "大余", child: [ { name: "大余", }, ], }, { name: "上犹", child: [ { name: "上犹", }, ], }, { name: "崇义", child: [ { name: "崇义", }, ], }, { name: "安远", child: [ { name: "安远", }, ], }, { name: "定南", child: [ { name: "定南", }, ], }, { name: "全南", child: [ { name: "全南", }, ], }, { name: "兴国", child: [ { name: "兴国", }, ], }, { name: "会昌", child: [ { name: "会昌", }, ], }, { name: "寻乌", child: [ { name: "寻乌", }, ], }, { name: "石城", child: [ { name: "石城", }, ], }, { name: "龙南", child: [ { name: "龙南", }, ], }, ], }, { name: "景德镇", child: [ { name: "珠山区", child: [ { name: "珠山区", }, ], }, { name: "昌江区", child: [ { name: "昌江区", }, ], }, { name: "乐平市", child: [ { name: "乐平市", }, ], }, { name: "浮粱县", child: [ { name: "浮粱县", }, ], }, ], }, ]; export default { name: "App", components: {}, setup() { const value = ref(["广州", "黄埔", "文冲"]); const fieldNames = { label: "name", value: "name", children: "child", }; return { options, value, fieldNames, }; }, }; </script> ```javascript ### typescript 用法 ```javascript <script lang="ts"> import { defineComponent, ref } from 'vue' import VSelect from '~/VSelect/src/index.vue' export default defineComponent({ name: 'App', components: { VSelect }, setup() { const value = ref<string[]>(['广州', '黄埔', '文冲']) const fieldNames = ref<{ [key: string]: string }>({ label: 'name', value: 'name', children: 'child' }) const options: ICascadeOptions[] return { options, value, fieldNames, spitFlag } } }) </script> ```