iview tree 绑定数据
官方文档 :https://www.iviewui.com/components/tree
效果图
1 主体分析
<Tree ref="tree" :data="treeData" :load-data="loadData" :render="renderContent" :on-select-change="loadData"></Tree>
:load-data=loadData 异步加载数据的方法
:on-select-change="loadData" 点击树节点时触发
:data="treeData 生成tree的数据
:render="renderContent" 自定义渲染的内容
2 代码分析
//树型图标
renderContent (h, { root, node, data }) {
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
// 判断图标显示样式
h('span', [
h('img', {
attrs: {
src:data.parentId=='-1'?require('@/assets/images/tree/computer.png'):
require('@/assets/images/tree/computer1.png')
size: 18,
color: data.parentId=='-1' ? '#70A7B8' :'#70A7B8',
},
}
),
// 点击莫一行文字的时候显示
h('span',{
style: {
cursor:'pointer'
},
class: "a",
on:{ click:(e)=>{
this.showDetial(data.pathId)
}
}
}, data.title)
]),
]);
},
//异步加载数据
loadData (item, callback) {
let resourceId = this.con_rid
let attrId = this.con_id
getSourceListApi({
resourceId:resourceId,
attrId:attrId,
parentId:item.pathId,
}).then(res => {
this.loading=false
res.data.pathList.map(item => {
item.keyName = item.pathName
item["title"] = item.pathName
item["children"] = []
item["loading"] = false
})
callback(res.data.pathList);
})
},
iview tree 绑定数据的更多相关文章
- tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加
tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加
- 【整理】iview Tree数据格式问题,无限递归树处理数据
iview Tree数据格式问题,无限递归树处理数据 https://juejin.im/post/5b51a8a4e51d455d6825be20
- WebDataTree 使用XML做数据源绑定数据
英文版原文链接:http://www.infragistics.com/help/topic/e5f07b51-ee2d-4a33-aaac-2f43cffff327 所使用的控件版本为:Infrag ...
- easyui-tree绑定数据的几种方式
没想到easyui对json数据格式要求的那么严谨,折腾了半天 第一种直接使用标签方式,很容易就加载出来了: <ul class="easyui-tree"> < ...
- IVIEW TREE问题总结
1. API得到的tree数组数据,在前端构造成iview tree格式,无法编辑或者无法再次选中的问题: 由于VUE不能检测到数据或对象的变动,官网文档有解释 由于 JavaScript 的限制,V ...
- Android之ListView性能优化——一行代码绑定数据——万能适配器
如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...
- angularJS绑定数据时自动转义html标签
angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...
- 【WPF】绑定数据
WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
随机推荐
- 机器学习5- 对数几率回归+Python实现
目录 1. 对数几率回归 1.1 求解 ω 和 b 2. 对数几率回归进行垃圾邮件分类 2.1 垃圾邮件分类 2.2 模型评估 混淆举证 精度 交叉验证精度 准确率召回率 F1 度量 ROC AUC ...
- Web前端开发必不可少的9个开源框架
大多数人想到Web开发时,通常会想到HTML或JavaScript,往往忽略了CSS,根据Wikipedia的说法,CSS既是网页中最重要也是最常被遗忘的部分之一,尽管它是万维网的三大基础技术之一. ...
- linux 磁盘存储和文件系统
1.磁盘结构 设备文件:关联至一个设备驱动程序,进而能够与之对应硬件设备进行通信 I/O Ports:I/O 设备地址 一切皆文件:open(),read(),write(),close() 设备类型 ...
- Python内置函数enumerate()
enumerate()是Python的内置函数. help(enumerate) Help on class enumerate in module builtins: class enumerate ...
- swift 3.0字符串的简单使用
let str:String = "12314124" 获取某个指定位置的元素 print(str.characters[str.index(str.startIndex, off ...
- AngularJS学习1-基础知识
Angular并不是适合任何应用的开发,Angular考虑的是构建CRUD应用 但是目前好像也只是用到了angular的一些指令,数据绑定,mvc,http服务而已..... 以前传统的做法就是,通过 ...
- MySQL Change Data Directory
为什么80%的码农都做不了架构师?>>> Stop MySQL using the following command: sudo /etc/init.d/mysql stop ...
- Vue.js 条件渲染 v-if、v-show、v-else
v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...
- Merge_Sort
public class Merge_Sort { public static void merge(int a[],int n){ int source; //合并之前数组的大小 int targe ...
- [Docker]compose一键部署nginx
Docker-compose部署nginx 创建配置文件 mkdir -p /usr/local/docker/nginx cat > /usr/local/docker/nginx/docke ...