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官网文档,地址如下:

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

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

chentreelick(data) {      console.log(data);      console.log("点击了");      console.log(data[0].chenshow);    },        //留神:参数 data,在点击的时候能够获取到后盾的数据,这个数据是来自后盾的,在理论开发中,咱们能够 利用 data,把后盾须要的id传给 后盾

7.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让我咱们一起致力走向巅峰!