好资源导航 » 文章资讯 » vue+iview使用树形控件的具体使用

vue+iview使用树形控件的具体使用

2023-07-12 22:35:03 83

vue+iview使用树形控件

1.开发环境vue+iview

2.电脑系统windows10专业版

3.在使用vue+iview开发的过程中,我们经常会使用iview的树形控件,在这里我就简单的做一个分享,希望对你有所帮助!

4.在template中添加如下代码:

5.在return中添加如下代码:

treedata:[
{
title:"parent1",
chenshow:false,
expand:true,
children:[
{
title:"parent1-1",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-1-1",
chenshow:true,
},
{
title:"leaf1-1-2",
chenshow:true,
selected:true,
},
],
},
{
title:"parent1-2",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-2-1",
chenshow:true,
},
{
title:"leaf1-2-1",
chenshow:true,
},
],
},
{
title:"parent1-3",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-3-1",
chenshow:true,
},
{
title:"leaf1-3-1",
chenshow:true,
},
],
},
{
title:"parent1-4",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-4-1",
chenshow:true,
},
{
title:"leaf1-4-1",
chenshow:true,
},
],
},
{
title:"parent1-5",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-5-1",
chenshow:true,
},
{
title:"leaf1-5-1",
chenshow:true,
},
],
},
{
title:"parent1-6",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-6-1",
chenshow:true,
},
{
title:"leaf1-6-1",
chenshow:true,
},
],
},
{
title:"parent1-7",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-7-1",
chenshow:true,
},
{
title:"leaf1-7-1",
chenshow:true,
},
],
},
{
title:"parent1-8",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-8-1",
chenshow:true,
},
{
title:"leaf1-8-1",
chenshow:true,
},
],
},
{
title:"parent1-9",
chenshow:false,
expand:true,
children:[
{
title:"leaf1-9-1",
chenshow:true,
},
{
title:"leaf1-9-1",
chenshow:true,
},
],
},
],
},
],

5-1.注意这个return中绑定的数据,可以参考iview官方文档,地址如下:

https://www.iviewui.com/components/tree

6.在methods中添加如下代码:

chentreelick(data){
console.log(data);
console.log("点击了");
console.log(data[0].chenshow);
},

//注意:参数data,在点击的时候可以获取到后台的数据,这个数据是来自后台的,在实际开发中,我们可以利用data,把后台需要的id传给后台

到此这篇关于vue+iview使用树形控件的具体使用的文章就介绍到这了,更多相关vueiview树形控件内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
514930285
czq8825@qq.com

vue+iview使用树形控件的具体使用

热门推荐

随机推荐