vue+element 树形控件初次使用

树形控件初次使用

element树形控件可以用很清晰的层级结构展示信息，可以展开，也可以折叠。

         <el-tree
              :data="data5"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              :class="$style.lchild"
              @node-click="handleNodeClick">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => append(data)">
                    <i class="el-icon-circle-plus" ></i>
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => remove(node, data)">
                    <i class="el-icon-delete"></i>
                  </el-button>
                  <el-button
                  size="mini"
                    type="text"
                    @click="() => edit(data)">
                    <i class="el-icon-edit"></i>
                    </el-button>
                </span>
              </span>
            </el-tree>

树形结构为了便于选取，前面会有一个白色的框框，但是看起来会比较不好看，el-tree里面有一条show-checkbox，去掉就可以了
vue+element 树形控件初次使用
两个button整齐的排列在页面的右边，这个是CSS设定了，大家可以根据自己的想法来排版

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

这些都是官网上都有的内容，写一些我初次使用时遇到的问题。
在项目中写好了项目是需要写路由，然后才能看到你所写的效果。

    routes: [{
      path: '/device',
      name: 'leftdev',
      component: Leftdev
    }]
	import Leftdev from '@/views/device/leftdev'

path是路径，name是自己文件的列表，component里面一般都是大写字母，而且name是需要和你自己写的文件里的name保持一致，起名字的时候要起的好理解一些，至少要让自己知道这个是写的什么部分。
然后在网页中输入地址：http://localhost:8080/#/device，井号是主页面

但是现在我还有一个问题没有解决，我想实现点击添加时，弹出一个dialog，然后将dialog内填写的数据呈现在树形控件上，因为本省树形控件里添加的信息是固定的。
但是我每次初次添加时，因为name在点击时为空，所以会添加一个空的枝节，第二次添加时dialog里上一次添加的name，才会被使用，然后添加到枝节上，如果自己写一个提交函数，树形控件里的children会出问题，暂时还没有想出来解决的方法。

append (data) {
      this.dialogFormVisible1 = true
      const name = this.form.name
      const newChild = { id: id++, label: name, children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
      console.log(this.label)
    },

我知道我代码的问题所在，以内dialog弹出了，然后代码继续向下执行，所以就会出现我之前说的问题，但是我暂时还不知道怎么解决，等知道了在再为现在的自己解答吧。

vue+element 树形控件初次使用

树形控件初次使用

相关推荐