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