1. <template>
  2. <a-tree-select
  3. v-model:value="value"
  4. style="width: 320px"
  5. :tree-data="treeData"
  6. allow-clear
  7. @select="selectHnader"
  8. search-placeholder="Please select"
  9. />
  10. </template>
  11. <script lang="ts">
  12. import { TreeSelect } from 'ant-design-vue';
  13. import { defineComponent, ref, toRefs, watch } from 'vue';
  14. const treeData = [
  15. {
  16. title: '部门0-0',
  17. value: '0-0',
  18. key: '0-0',
  19. children: [
  20. {
  21. title: '部门0-0-0',
  22. value: '0-0-0',
  23. key: '0-0-0',
  24. },
  25. ],
  26. },
  27. {
  28. title: '部门0-1',
  29. value: '0-1',
  30. key: '0-1',
  31. children: [
  32. {
  33. title: '部门0-1-0',
  34. value: '0-1-0',
  35. key: '0-1-0',
  36. disabled: true, // 该值不能够选中
  37. },
  38. {
  39. title: '教育局',
  40. value: '0-1-1',
  41. key: '0-1-1',
  42. },
  43. ],
  44. },
  45. ]
  46. export default defineComponent({
  47. setup() {
  48. // 那么它将选中部门 部门0-0-0;
  49. // 通过value值显示对应的title值
  50. const value = ref(['0-0-0']);
  51. // 监听,但是可能不需要
  52. watch(value, () => {
  53. console.log(value.value);
  54. });
  55. function selectHnader(value:any, node:any, extray:any){
  56. console.log("==>value",value); //获取的是数据源中的value值
  57. console.log("==>node", toRefs(node) ); // 该选中节点的属性
  58. console.log("==>extray",extray.selectedNodes[0].props.title); //得到显示的值
  59. }
  60. return {
  61. value,
  62. treeData,
  63. selectHnader
  64. };
  65. },
  66. });
  67. </script>

使用select事件

  1. select 事件 被选中时调用
  2. function(value, node, extra)
  3. 我使用 select事件主要是得到选中的显示值
  4. 最初我还想通过递归根据id得到显示的值{哈哈。尴尬了}

Ant Design Vue中TreeSelect详解的更多相关文章

  1. vue中v-model详解

    vue中经常使用到<input>和<textarea>这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别.vue使用v-model实现这些标签数据 ...

  2. Android Design Support Library使用详解

    Android Design Support Library使用详解 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的And ...

  3. vue 文件目录结构详解

    vue 文件目录结构详解 本篇文章主要介绍了vue 文件目录结构详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 项目简介 基于 vue.js 的前端开发环境,用于前后 ...

  4. Ant Design Vue select下拉列表设置默认值

    在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...

  5. Vue props用法详解

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...

  6. vue2.0中router-link详解

    vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...

  7. Ant Design Vue Pro 项目实战-项目初始化(一)

    写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...

  8. main.js index.html与app.vue三者关系详解

    main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186   main.js与index.html是nodejs的项目启 ...

  9. 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  10. vue 源码详解(一):原型对象和全局 `API`的设计

    vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...

随机推荐

  1. 个性化联邦学习算法框架发布,赋能AI药物研发

    摘要:近期,中科院上海药物所.上海科技大学联合华为云医疗智能体团队,在Science China Life Sciences 发表题为"Facing Small and Biased Dat ...

  2. DarkMode(5):深色模式不同实现方案切换

    sass自定义函数转 sass预处理 在<DarkMode(2):深色模式解决方案--css颜色变量实现Dark Mode>与<DarkMode(3):深色模式解决方案--颜色反转与 ...

  3. 火山引擎数智平台VeDI荣获虎啸奖“年度最佳智能营销平台”奖项

    近日,由中国商务协会数字营销专业委员会指导的第十四届虎啸奖正式公布获奖名单,火山引擎数智平台VeDI荣获技术平台/产品类奖项.   作为国内品牌营销领域兼具权威性.前瞻性以及创新性的赛事活动,第十四届 ...

  4. PPT 工作计划PPT 应该怎么样改

    收集素材 页面处理 丰富细节 PPT 工作计划PPT 应该怎么样做

  5. 注册中心/配置管理 —— SpringCloud Consul

    Consul 概述 Consul 是一个可以提供服务发现,健康检查,多数据中心,key/Value 存储的分布式服务框架,用于实现分布式系统的发现与配置.Cousul 使用 Go 语言实现,因此天然具 ...

  6. python支付宝支付

    支付宝开放平台: https://open.alipay.com/platform/home.htm 支付宝沙箱环境: https://openhome.alipay.com/platform/app ...

  7. 【库函数】QT 中QString字符串的操作

    QString是QT提供的字符串类,相应的也就提供了很多很方便对字符串的处理方法.这里把这些对字符串的操作做一个整理和总结. 1. 将一个字符串追加到另一个字符串的末尾 QString str1 = ...

  8. Codeforces Round #681 (Div. 2, based on VK Cup 2019-2020 - Final) 个人题解(A - D)

    1443A. Kids Seating 题意: 给你一个整数n,现在你需要从编号 \(1\) ~ $4 ⋅ n \(中选出\)n\(个编号使得这些编号之间\)g c d ≠ 1$ ,不能整除. 看了半 ...

  9. SpringCloud学习 系列二、 简介

    系列导航 SpringCloud学习 系列一. 前言-为什么要学习微服务 SpringCloud学习 系列二. 简介 SpringCloud学习 系列三. 创建一个没有使用springCloud的服务 ...

  10. webpack升级-心得