vue+iview使用树形控件的具体使用
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了vue+iview使用树形控件的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
vue+iview使用树形控件
1.开发环境 vue+iview
2.电脑系统 windows10专业版
3.在使用 vue+iview开发的过程中,我们经常会使用 iview的树形控件,在这里我就简单的做一个分享,希望对你有所帮助!
4.在template中添加如下代码:
<Scroll style="width: 100%" height="760">
<Tree
@on-select-change="chentreelick"
:data="treedata"
expand-node
></Tree>
</Scroll>
5.在 return 中添加如下代码:
treedata: [
{
title: "parent 1",
chenshow: false,
expand: true,
children: [
{
title: "parent 1-1",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-1-1",
chenshow: true,
},
{
title: "leaf 1-1-2",
chenshow: true,
selected: true,
},
],
},
{
title: "parent 1-2",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-2-1",
chenshow: true,
},
{
title: "leaf 1-2-1",
chenshow: true,
},
],
},
{
title: "parent 1-3",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-3-1",
chenshow: true,
},
{
title: "leaf 1-3-1",
chenshow: true,
},
],
},
{
title: "parent 1-4",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-4-1",
chenshow: true,
},
{
title: "leaf 1-4-1",
chenshow: true,
},
],
},
{
title: "parent 1-5",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-5-1",
chenshow: true,
},
{
title: "leaf 1-5-1",
chenshow: true,
},
],
},
{
title: "parent 1-6",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-6-1",
chenshow: true,
},
{
title: "leaf 1-6-1",
chenshow: true,
},
],
},
{
title: "parent 1-7",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-7-1",
chenshow: true,
},
{
title: "leaf 1-7-1",
chenshow: true,
},
],
},
{
title: "parent 1-8",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-8-1",
chenshow: true,
},
{
title: "leaf 1-8-1",
chenshow: true,
},
],
},
{
title: "parent 1-9",
chenshow: false,
expand: true,
children: [
{
title: "leaf 1-9-1",
chenshow: true,
},
{
title: "leaf 1-9-1",
chenshow: true,
},
],
},
],
},
],
5-1.注意 这个 return中绑定的数据,可以参考 iview官方文档,地址如下:
6.在 methods中添加如下代码:
chentreelick(data) {
console.log(data);
console.log("点击了");
console.log(data[0].chenshow);
},
//注意:参数 data,在点击的时候可以获取到后台的数据,这个数据是来自后台的,在实际开发中,我们可以 利用 data,把后台需要的id传给 后台
到此这篇关于vue+iview使用树形控件的具体使用的文章就介绍到这了,更多相关vue iview 树形控件内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- Win10 PC创意者更新慢速版15048改进内容与已知问题
- 用纯CSS3实现网页中常见的小箭头
- 神舟笔记本问题集锦
- Bellnames常用操作说明
- 揭秘手机淘宝搜索排序的影响因素
- XHTML入门学习教程-网页Head和DTD
- 笔记本光驱保养常用知识
- hzhost虚拟主机系统致命漏洞
- 电脑无线网络出现红色叉叉无线网卡打不开的六
- 16项评比不得不看 机箱哪些功能最实用
- AI怎么绘制一个呲牙的qq表情-
- 红帽指点杆机械键盘 TEX Yoda上手体验测评
- 笔记本电脑保养常识有哪些-笔记本保养常识总结
- cdr怎么设计圆角矩形效果的图标-
- 在XSLT样式表中声明命名空间小结
- Fireworks教程-常用操作技巧总结