关于vue.js:vueiview使用树形控件

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,心愿对你有所帮忙,让我咱们一起致力走向巅峰!