树型

例子

树型 - 图1

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

  1.  <avue-tree :option="option" :data="data" @node-click="nodeClick" @update="update" @save="save" @del="del" v-model="form">
  2.   <template slot-scope="scope" slot="menuBtn">
  3.       <el-dropdown-item @click.native="tip(scope.node,scope.data)">自定义按钮</el-dropdown-item>
  4.   </template>
  5.  </avue-tree>
  7. <script>
  8. export default {
  9.     data () {
  10.       return {
  11.           form:{},
  12.           data:[
  13.             {
  14.               id:0,
  15.               label:'一级部门',
  16.               value:0,
  17.               children:[
  18.                 {
  19.                   id:1,
  20.                   label:'一级部门1',
  21.                   value:0,
  22.                 },{
  23.                   id:2,
  24.                   label:'一级部门2',
  25.                   value:0,
  26.                 }
  27.               ]
  28.             },{
  29.               id:3,
  30.               label:'二级部门',
  31.               value:0,
  32.               children:[
  33.                 {
  34.                   id:4,
  35.                   label:'二级部门1',
  36.                   value:0,
  37.                 },{
  38.                   id:5,
  39.                   label:'二级部门2',
  40.                   value:0,
  41.                 }
  42.               ]
  43.             }
  44.           ],
  45.           option:{
  46.             nodeKey:'id',
  47.             formOption:{
  48.               labelWidth:100,
  49.               column:[{
  50.                   label:'自定义项',
  51.                   prop:'test'
  52.               }],
  53.             }
  54.             props:{
  55.               labelText:'标题',
  56.               label:'label',
  57.               value:'value',
  58.               children:'children'
  59.             }
  60.           }
  61.       }
  62.   },
  63.   methods:{
  64.     tip(node,data){
  65.         this.$message.success(JSON.stringify(data))
  66.     },
  67.     del(data,node,done){
  68.       this.$message.success('删除回调')
  69.       done();
  70.     },
  71.     update(data,node,done){
  72.       this.$message.success('更新回调')
  73.       done();
  74.     },
  75.     save(data,node,done){
  76.       this.$message.success('新增回调')
  77.       this.form.id = new Date().getTime();
  78.       this.form.value=new Date().getTime();
  79.       this.form.children=[];
  80.       done();
  81.     },
  82.     nodeClick(data){
  83.       this.$message.success(JSON.stringify(data))
  84.     }
  85.   }
  86. }
  87. </script>

Avue-tree Attributes

参数说明类型可选值默认值
option组件配置属性，详情见下面Option属性Object——
data存放结构体的数据Array——

Avue-tree Option Attributes

参数说明类型可选值默认值
expandAll是否展开节点Booleanfalse / truetrue
nodeKey节点的主键String-id
dialogWidth弹出框宽度String-50%
formOption自定义form表单，具体参考avue-form组件(默认自带一个标题的column，可以根据配置去修改)Object--
menu菜单栏Booleanfalse / truetrue
addBtn新增按钮Booleanfalse / truetrue
editBtn编辑按钮Booleanfalse / truetrue
delBtn修改按钮Booleanfalse / truetrue
props配置选项，具体看下表object--

Avue-tree props Attributes

参数说明类型可选值默认值
label指定节点标签为节点对象的某个属性值string——
labelText弹窗添加节点的名称String-名称
children指定子树为节点对象的某个属性值string——
value指定节点选择框的值boolean——

Avue-tree Column Attributes

参数说明类型可选值默认值
label节点的名称String--
value节点的值String--
id节点主键String--
children子节点Array--

Avue-tree Events

事件名说明参数
save新增节点回调data, node, done
update修改节点回调data, node, done
del删除节点回调data, node, done

Avue-tree Scoped Slot

name说明
menuBtn按钮的卡槽
addBtn新增按钮卡槽