0.1.7 • Published 5 years ago
vue3-select-linkage v0.1.7
vue 3.0 下拉框联动效果
联动数据源
[
{
"name": "广州",
"value": "广州",
"child": [
{
"name": "天河",
"value": "天河",
"child": [
{
"name": "天河北",
"value": "天河北"
},
{
"name": "黄村",
"value": "黄村"
}
]
},
{
"name": "番禺",
"value": "番禺",
"child": [
{
"name": "石楼",
"value": "石楼"
},
{
"name": "市桥东",
"value": "市桥东"
}
]
}
]
}
]用法
main.js 引入组件库
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 用法
<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>