1. <head>
  2. <!-- include Vue 2.x -->
  3.     <script src="https://cdn.jsdelivr.net/npm/vue@@^2"></script>
  4.     <!-- include vue-treeselect & its styles. you can change the version tag to better suit your need. -->
  5.     <script src="https://cdn.jsdelivr.net/npm/@@riophae/vue-treeselect@0.0.37/dist/vue-treeselect.min.js"></script>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@riophae/vue-treeselect@0.0.37/dist/vue-treeselect.min.css">
  7.     <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  8. </head>
  9.  
  10. <div id="app" style="width:60%;height:100px;">
  11. <input type="hidden" asp-for="AuthItems" v-model="value" />
  12. <treeselect :value-consists-of="valueConsistsOf" /*代表全选子节点时，不会只是显示父节点，也是父节点不显示，显示所有子节点*/   :flat="true"/*表示父节点也会显示*/  v-model="value" :multiple="true" :options="options" placeholder="请选择授权项目" />
  13. </div>
  14.  
  15. <script>
  16. Vue.component('treeselect', VueTreeselect.Treeselect)
  17. var app = new Vue({
  18. el: '#app',
  19. data: {
  20. valueConsistsOf: 'LEAF_PRIORITY',
  21. // define default value
  22. value: [@Model.AuthItems],//默认选中
  23. // define options
  24. options: [],
  25. },
  26. //初始化方法
  27. mounted: function () {
  28. this.LoadTree();
  29. },
  30. methods: {
  31. //加载修改树结构json
  32. LoadTree: function () {
  33. var that = this;
  34. console.log("==============================");
  35. axios.post('/@Html.A()/Dialog/GetSurgicalClassification', {})
  36. .then(function (res) {
  37. console.log(res.data);
  38. that.options = res.data;
  39. })
  40. .catch(function (error) {
  41. console.log(error);
  42. });
  43.  
  44. //this.options = [{
  45. // id: 1,
  46. // label: 'a',
  47. // children: [{
  48. // id: 2,
  49. // label: 'aa',
  50. // }, {
  51. // id: 3,
  52. // label: 'ab',
  53. // }],
  54. //}, {
  55. // id: 4,
  56. // label: 'b',
  57. //}, {
  58. // id: 5,
  59. // label: 'c',
  60. //}];
  61. }
  62. }
  63. })
  64.  
  65. </script>

vue-Treeselect 使用备注的更多相关文章

  1. 以vue+TreeSelect为例，如何将扁平数据转为tree形数据

    // 目标:将后台返回的扁平数据,根据parentId转为下拉tree <el-form-item label='下拉选择数据'> <tree-select v-model='tre ...

  2. node+webpack+vue的环境搭建

      一般第一次搭建环境的时候,多多少少还是会出点状况的.这个时候多去百度,看牛人怎么解决,然后跟着尝试,多试几遍还是能解决的. 先说一下我安装的过程吧 1.我一开始按照官网的来搭建,失败了.报错内容是 ...

  3. Vue+Iview+Node 项目结构和配置

    1.项目调整后的目录 api:数据接口定义 assets:静态文件 components:组件  config:项目相关配置  driective:指令   router:路由   store:状态管 ...

  4. Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）

    文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...

  5. 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架

    目录 准备工作 搭建项目 vue 中 ts 语法 项目代理及 webpack 性能优化 其他 忙里偷闲,整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架,并如何自定义 web ...

  6. 利用Vue.js实现拼图游戏

    之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...

  7. JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  8. vue.js学习之入门实例

    之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...

  9. vue + vuex 表单处理

    使用场景:在一个表单中,各项数据提交后需要重置表单中各<input>元素的值为空. 组件中关联: <template> <el-form ref="form&q ...

  10. Vue.js实现拼图游戏

    Vue.js实现拼图游戏 之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/ ...

随机推荐

  1. 人体感应模块控制LCD1602背景灯是否开启

    /* Web client This sketch connects to a website (http://www.google.com) using an Arduino Wiznet Ethe ...

  2. C和指针小结（C/C++程序设计）

    C和指针 相关基础知识:内存的分配(谭浩强版) 1.整型变量的地址与浮点型/字符型变量的地址区别?(整型变量/浮点型变量的区别是什么) 2.int *p,指向整型数据的指针变量. 3.通过指针变量访问 ...

  3. 云服务器vps

    0.云计算时代,是一个很时髦的词,人们常常谈起,挂在嘴边.其实云计算通俗点就是电脑托管到了远端的机房,然后不用去买配件主机,是摸不到的,但通过网络远程连接,就可以使用云服务器的资源和功能(搭建网站,测 ...

  4. HDU 2095 find your present (2) （异或）

    题意:给定n个数,让你找出那一个次数为1的. 析:由于题意说了,只有那一个数是奇数,所以其他的都是偶数,根据异或的性质,两个相同的数异或为0: 任何数和0异或得原数,可以很简单的做出这个题. 代码如下 ...

  5. verilog基础--altera培训

    参数化 Localparam :与prameter一样,但不能被重写. Verilog-2001 格式, module mult_acc #(parameter size = 8 ) (...); 数 ...

  6. B样条参数曲线学习（1）

    B样条参数曲线学习 Bezier曲线有许多优越性,但有两点不足: (1) 特征多边形的顶点个数决定了Bezier曲线的阶次,并且在阶次较大时,特征多边形对曲线的控制将会减弱: (2) Bezier曲线 ...

  7. 使用工厂方法配置bean的两种方式

    1.使用静态工厂方法: 对应的配置.xml文件: 2.通过实例工厂的方法来配置bean: 对应的xml文件:

  8. cocos studio

    用了几天,和之前用的cocos creator以及unity的编辑器一对比,很多地方都挺反人类的哈... 拖拽和放大场景元素竟然还要切换一下编辑模式... 移动场景元素竟然没有单独控制x或者y方向的移 ...

  9. FP-Growth in Spark MLLib

    并行FP-Growth算法思路 上图的单线程形成的FP-Tree. 分布式算法事实上是对FP-Tree进行分割,分而治之 首先,假设我们只关心...|c这个conditional transactio ...

  10. 找不到请求的 .Net Framework Data Provider

    1.安装 mysql-connector-net-6.9.10.msi 2.修改C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\machine ...