vue Tree树形结构列表自定义节点内容为表格

elementui的tree组件节点内容添加表格失败，所以我又尝试用了View UI组件库里面的树形列表，最终成功实现。

view UI的官网地址：https://www.iviewui.com/components/tree

这个需要注意一下，如果用view UI的tree组件的话，显示的字段要用title，就像elementui里面用的是label一样，如果自己的字段名不一样的话 就需要改成title

有关修改树形结构的键值，我之前的文章有写到过：https://www.cnblogs.com/xianglian/p/15469956.html

先看普通的树形结构，相比elementui的label和children来说，一层套一层这里的显示就是两个属性：title和children

 

 

 

 

而我的需求是判断是否是最后一级数据，如果是，代表没有子级，就把表格插入为最后一级的子级。

先看效果图：

 

 

 接下来一步步实现：

1、安装并在main.js中引入view UI

npm install view-design --save  //下载包

// 在main.js引入
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);

2、在组件中使用

        <Tree
          :data="treedata"
          show-checkbox
          @on-check-change="changeCheck"
          class="demo-tree-render"
        ></Tree>

treedata为获取到的树形列表，show-checkbox表示显示多选框，changeCheck表示点击复选框时触发的方法

        let arrAll = this.lookForAllId(this.treedata); //获取树形结构的所有节点  这一步是拿到后端返回的树形结构转为普通的数组进行循环
        arrAll.forEach((item2) => {
          if (item2.children == null) {
            //如果没有子节点代表是最后一级  插入表格
            const data = [
              {
                data: item2.devices,  //这是表格里显示的内容数组
                render: (h, { root, node, data }) => {
                  console.log(data);
                  return h("Table", {
                    style: {  //设置table的样式
                      position: "relative",
                      left: "-30%",
                      width: "100%",
                    },
                    props: {  //设置table的每一列数据
                      columns: [
                        // {
                        //   type: "selection",
                        //   width: 30,
                        //   align: "center",
                        // },
                        {
                          title: "设备编号",
                          key: "number",
                          align: "center",
                          width: 100,
                        },
                        {
                          title: "设备名称",
                          key: "name",
                          align: "center",
                          render: (h, params) => {  //设置设备名称这一列当内容超出时进行鼠标移出提示
                            return h(
                              "Tooltip",
                              {
                                props: { placement: "left" }, //当设备名称内容超出时，在表格当前行的左边进行完整提示
                              },
                              [
                                this.maxSlice(params.row.name),
                                h(
                                  "span",
                                  {
                                    slot: "content",
                                    style: {
                                      whiteSpace: "normal",
                                      wordBreak: "break-all",
                                    },
                                  },
                                  params.row.name
                                ),
                              ]
                            );
                          },
                        },
                      ],
                      highlightRow: true, //点击的时候高亮显示
                      border: true, //加边框
                      _checked: true,
                      data: data.data,
                    },

                    on: {
                      //调用table组件自身的事件函数 点击当前行
                      "on-row-click": (item, index) => {
                        console.log(item,index)
                      },
                      //多选框发生改变时
                      "on-selection-change": (selection) => {
                        console.log(selection);
                      },
                    },
                  });
                },
              },
            ];
            item2.children = data; //插入表格成为最后一级的子节点 data就是自己上面定义想要插入的数据 把他当成children插入树形结构就可以啦
          }
})

// 对表格当前行的数据进行切割  超出10个字进行鼠标移入tooltip提示
    maxSlice(v) {
      if (v) {
        return v.length > 10 ? v.slice(0, 10) + "..." : v;
      }
    },

tooltip的方法之所以需要我们自己写是因为viewui没有提供对应的方法  elementui是有提供了的

以上代码的话就可以实现在树形结构里面自定义插入表格为子节点。

完结！