text: <!DOCTYPE html>
  
  <html class="no-js">
  
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  
    <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
  
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
    <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/avue.js"></script>
  </head>
  
  <body>
    <div id="app">
      <avue-tree ref="tree" :option="option" :data="data" @node-click="nodeClick" @update="update" @save="save" @del="del"
        v-model="form">
        <span class="el-tree-node__label" slot-scope="{ node, data }">
          <span>
            <i class="el-icon-user-solid"></i>
            {{ node.label }}
          </span>
        </span>
        <template slot-scope="scope" slot="menu">
          <div class="avue-tree__item" @click.native="tip(scope.node,scope.data)">自定义按钮</di>
        </template>
      </avue-tree>
  
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {},
          data: [
            {
              value: 0,
              label: '一级部门',
              children: [
                {
                  value: 1,
                  label: '一级部门1',
                }, {
                  value: 2,
                  label: '一级部门2',
                }
              ]
            }, {
              value: 3,
              label: '二级部门',
              children: [
                {
                  value: 4,
                  label: '二级部门1',
                }, {
                  value: 5,
                  label: '二级部门2',
                }
              ]
            }
          ],
          option: {
            defaultExpandAll: true,
            dialogWidth: '50%',
            title: "新增部门",
            formOption: {
              labelWidth: 100,
              column: [{
                label: '自定义项',
                prop: 'test'
              }],
            },
            props: {
              labelText: '标题',
              label: 'label',
              value: 'value',
              children: 'children'
            }
          }
        }
      },
      methods: {
        tip(node, data) {
          this.$message.success(JSON.stringify(data))
        },
        del(data, done) {
          this.$message.success('删除回调')
          done();
        },
        update(parent, data, done, loading) {
          console.log(parent);
          this.$message.success('更新回调')
          done();
        },
        save(parent, data, done, loading) {
          console.log(parent);
          this.$message.success('新增回调')
          this.form.value = new Date().getTime();
          done();
        },
        nodeClick(data) {
          this.$message.success(JSON.stringify(data))
        }
      }
    })
  </script>
  
  </html>