Tree 树型

常用的树型组件

TIP

1.0.0+

普通用法

option配置属性即可,data为可配置项目，具体参考下表文档

<avue-tree :option="option" :data="data" @node-click="nodeClick" @update="update" @save="save" @del="del" v-model="form">
  <template slot-scope="scope" slot="menuBtn">
      <el-dropdown-item @click.native="tip(scope.node,scope.data)">自定义按钮</el-dropdown-item>
  </template>
</avue-tree>
<script>
export default {
    data () {
      return {
          form:{},
          data:[
            {
              id:0,
              label:'一级部门',
              value:0,
              children:[
                {
                  id:1,
                  label:'一级部门1',
                  value:0,
                },{
                  id:2,
                  label:'一级部门2',
                  value:0,
                }
              ]
            },{
              id:3,
              label:'二级部门',
              value:0,
              children:[
                {
                  id:4,
                  label:'二级部门1',
                  value:0,
                },{
                  id:5,
                  label:'二级部门2',
                  value:0,
                }
              ]
            }
          ],
          option:{
            nodeKey:'id',
            size:'small',
            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,node,done){
      this.$message.success('删除回调')
      done();
    },
    update(data,node,done){
      this.$message.success('更新回调')
      done();
    },
    save(data,node,done){
      this.$message.success('新增回调')
      this.form.id = new Date().getTime();
      this.form.value=new Date().getTime();
      this.form.children=[];
      done();
    },
    nodeClick(data){
      this.$message.success(JSON.stringify(data))
    }
  }
}
</script>

Variables

Option Attributes

Column Attributes

Props Attributes

Events

Scoped Slot