Vue.js组件tree实现省市多级联动
2019/6/27 21:36:29
本文主要是介绍Vue.js组件tree实现省市多级联动,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动。
调用示例:
<template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { components: { treeview }, props: { }, method:{ }, ready:function(){ }, data(){ return { treedata:{text:'地域', children: [{ text: '中国', children: [{ text: '陕西省', children: [{ text: '西安市', children: [{ text: '碑林区' }, { text: '雁塔区' }, { text: '未央区区' }, { text: '新城区' }] }, { text: '安康市' }, { text: '咸阳市', children: [{ text: '秦都区' }, { text: '渭城区' }] }, { text: '渭南市' }] }, { text: '四川省', children: [{ text: '成都市' }, { text: '绵阳市' }, { text: '广元市' }] }, { text: '安徽省' }] }, { text: '俄罗斯' }]}} } } </script>
组件代码:
<style scoped> ul,li{ list-style-type: none; } </style> <template> <li> <div @click='toggle'><span v-if='hasLeaves'>[{{open ? '-' : '+'}}]</span>{{model.text}}</div> <ul> <treeview v-for='model in model.children' :model='model' v-show='open'></treeview> </ul> </li> </template> <script> export default { name: 'treeview', props: { model: { type: Object } }, methods: { toggle:function(){ this.open=!this.open; } }, ready: function() {}, computed:{ hasLeaves: function() { return this.model.children && this.model.children.length } }, data() { return { open: false } } } </script>
效果图:
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于Vue.js组件tree实现省市多级联动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist