<head>

<!-- include Vue 2.x -->

    <script src="https://cdn.jsdelivr.net/npm/vue@@^2"></script>

    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your need. -->

    <script src="https://cdn.jsdelivr.net/npm/@@riophae/vue-treeselect@0.0.37/dist/vue-treeselect.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@riophae/vue-treeselect@0.0.37/dist/vue-treeselect.min.css">

    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

</head>

<div id="app" style="width:60%;height:100px;">

<input type="hidden" asp-for="AuthItems" v-model="value" />

<treeselect :value-consists-of="valueConsistsOf" /*代表全选子节点时，不会只是显示父节点，也是父节点不显示，显示所有子节点*/   :flat="true"/*表示父节点也会显示*/  v-model="value" :multiple="true" :options="options" placeholder="请选择授权项目" />

</div>

<script>

Vue.component('treeselect', VueTreeselect.Treeselect)

var app = new Vue({

el: '#app',

data: {

valueConsistsOf: 'LEAF_PRIORITY',

// define default value

value: [@Model.AuthItems],//默认选中

// define options

options: [],

},

//初始化方法

mounted: function () {

this.LoadTree();

},

methods: {

//加载修改树结构json

LoadTree: function () {

var that = this;

console.log("==============================");

axios.post('/@Html.A()/Dialog/GetSurgicalClassification', {})

.then(function (res) {

console.log(res.data);

that.options = res.data;

})

.catch(function (error) {

console.log(error);

});

//this.options = [{

// id: 1,

// label: 'a',

// children: [{

// id: 2,

// label: 'aa',

// }, {

// id: 3,

// label: 'ab',

// }],

//}, {

// id: 4,

// label: 'b',

//}, {

// id: 5,

// label: 'c',

//}];

}

}

})

</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. UVa 11491 Erasing and Winning （贪心，单调队列或暴力）

    题意:给一个数字(开头非0),拿掉其中的d个数字,使剩下的数字最大(前后顺序不能变). 析:拿掉d个数字,还剩下n-d个数字.相当于从n个数字中按先后顺序选出n-d个数字使组成的数字最大,当然采用窗口 ...

  2. HDU 1756 Cupid's Arrow （几何问题，判定点在多边形内部）

    题意:中文的么,自己看喽. 析:很容易明白是判定点是不是在多边形内部,一般是向量来判定,我一开始用点在向量的右侧,因为是顺时针给的,只要点全在外侧或边上, 就可以,暴力一下就ok.由于这个是浮点数,一 ...

  3. python 判断是否是空行或注释行

    #coding:utf-8 '''''cdays-4-exercise-6.py 文件基本操作 @note: 文件读取写入, 列表排序, 字符串操作 @see: 字符串各方法可参考hekp(str)或 ...

  4. python编码（一）

    下面介绍一下python的编码机制,unicode, utf-8, utf-16, GBK, GB2312,ISO-8859-1等编码之间的转换. 1.自动识别字符串编码: #coding:utf8 ...

  5. Lucene.net 性能《第八篇》

    一.IndexReader性能分析 IndexReader完成了打开所有索引文件和提供底层reader API等繁重的工作,而IndexSearch则要简单得多.由于打开一个IndexReader需要 ...

  6. ASP.NET MVC 使 Controller 的 Action 只接受 Ajax 请求。

    首先,ajax 请求跟一般的 web 请求本质是相同的,都是 http 请求.理论上服务器端是无法区分该次请求是不是 ajax 请求的,但是,既然标题都已经说了,那么肯定是有办法做的. 在 ajax ...

  7. Python try/except/finally等

    Python try/except/finally等   x = 'abc' def fetcher(obj, index): return obj[index] fetcher(x, 4) 输出: ...

  8. OC 数组以及字符串拼接与分割

    //@""空的字符串对象-------分割 NSString * ptr = @"I am a man"; NSArray * array = [ptr com ...

  9. SqlServer数据库同时备份到两台服务器上（并自动删除过期文件）

    数据库同时备份到两台服务器上(并自动删除过期文件) 举例 :(本地)服务器A: IP :192.168.1.1 (远程)服务器B: IP :192.168.1.2 数据库版本:SqlServer200 ...

  10. django drf 动态权限配置和动态seriaizer_class配置

    可以通过重写get_permissions方法和get_serializers_class方法来实现动态的配置权限和序列化 VIewDemo class RegUserSet(mixins.Creat ...