PmTree

继承自 el-tree (opens new window) 并扩展了一些方法

基础用法

选中的节点

<div>
  <el-row :gutter="20">
    <el-col :span="12">
      <pm-tree
        :line="true"
        v-model="selectNode" 
        :data="treeData" 
        :props="treeProps" 
        @remove="remove" 
        @edit="edit"
        @node-expand="expand">
      </pm-tree>
    </el-col>
    <el-col :span="12">
      <div class="fs-16 font-bold">选中的节点</div>
      {{selectNode}}
    </el-col>
  </el-row>
</div>
<script>
export default {
  data() {
    return {
      selectNode: null,
      treeData:[
        {
          name:'直辖市',
          id:'1',
          children:[
            {name:'北京',id:'110'},
            {name:'上海',id:'120', children:[
            {name:'浦东新区',id:'121'},
            {name:'黄浦区',id:'122'},
            {name:'静安区',id:'123'},
            {name:'杨浦区',id:'124',children:[
            {name:'浦东新区',id:'121'},
            {name:'黄浦区',id:'122'},
            {name:'静安区',id:'123'},
            {name:'杨浦区',id:'124',children:[
            {name:'浦东新区',id:'121'},
            {name:'黄浦区',id:'122'},
            {name:'静安区',id:'123'},
            {name:'杨浦区',id:'124',children:[
            {name:'浦东新区',id:'121'},
            {name:'黄浦区',id:'122',children:[
            {name:'浦东新区',id:'121'},
            {name:'黄浦区',id:'122'},
            {name:'静安区',id:'123'},
            {name:'杨浦区',id:'124'},
          ]},
            {name:'静安区',id:'123'},
            {name:'杨浦区',id:'124'},
          ]},
          ]},
          ]},
          ]},
            {name:'天津',id:'130'},
          ]
        },
      ],
      treeProps:{
        id: 'id',
        label: 'name',
        children: 'children',
        isLeaf: 'isLeaf',
      }
    }
  },
  methods:{
    expand(n,d){
      console.log(n,d)
    },
    remove(node){
      this.$message({
        type:'error',
        message:`删除${JSON.stringify(node)}`
      })
    },
    edit(node){
      this.$message({
        type:'success',
        message:`编辑${JSON.stringify(node)}`
      })
    },
  }
}
</script>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	可选值	默认值
data	展示数据	Array	-	[]
searchable	允许检索	Boolean	true/false	true
editable	允许编辑	Boolean	true/false	true
removable	允许删除	Boolean	true/false	true
disabledKeys	禁用节点的 key 的数组	Array	-	[]
line	是否显示对齐线	Boolean	true/false	false

Events

参数	说明	类型	可选值	默认值
remove	删除方法	Function	-	-
edit	编辑方法	Function	-	-