
## 树形组件
 需要对节点进行过滤时,设置support-filter 属性为true , 默认值为false,设置可过滤时右上角的两个按钮可控制所有节点的展开或收起,刷新树节点。
```html
<template>
  <div class="cl-tree">
    <cl-tree 
      :tree-data="data" 
      :props="defaultProps"
      support-filter
      @refresh="handleRefresh"   
      @node-click="handleNodeClick"
    >
    </cl-tree>
  </div>
</template>
<script>
  import { getTreeList } from '$exp/api/tree'

  export default {
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
    mounted(){
      this.getTreeData()
    },
     methods: {
      handleNodeClick: function(data){
       this.$message({ message: "您点击了节点 " + data.name, type: "success" });
      },
      getTreeData(cb) {
        getTreeList()
          .then((res) => {
            this.data = res.data
          }).finally(()=>{
            setTimeout(() => {
              cb&&cb()
        }, 1000)
          })
      },
      handleRefresh(cb){
        this.getTreeData(cb)
      }
    },
  };
</script>
<!-- tree.vue -->
```
#### 自定义更多操作内容
 需要显示更多操作时，设置`show-more-button` 属性为true,默认值为false,自定义内容可使用`scoped slot`会传入两个参数node和data,还可以使用`render-content`方式具体使用可查看[element-ui文档](https://element.eleme.cn/2.15/#/zh-CN/component/tree)
```html
<template>
  <div class="cl-tree">
    <cl-tree 
      :tree-data="data"  
      support-filter
      height="200"
      show-more-button
      @refresh="handleRefresh"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
              <cl-icon
                class="more-icon"
                name="more"
                title="更多操作"
              />
          </span>
            
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus" :command="{node:node,data,action:'add'}">添加</el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-delete"
                :command="{node:node,data,action:'delete'}"
                divided
              >删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </span>
    </cl-tree>
    <el-dialog title="添加节点" :visible.sync="dialogFormVisible">
      <el-form :model="form" >
        <el-form-item label="节点名称" >
          <cl-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="节点id" >
          <cl-input type="number" v-model="form.id"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form:{
          name:'',
          id:'',
        },
         data: [
           {
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
              children: [{
                id: 9,
                label: '三级 1-1-1'
              }, {
                id: 10,
                label: '三级 1-1-2'
              }]
            }]
          }, {
            id: 2,
            label: '一级 2',
            children: [{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 6,
              label: '二级 2-2'
            }]
          }, {
            id: 3,
            label: '一级 3',
            children: [{
              id: 7,
              label: '二级 3-1'
            }, {
              id: 8,
              label: '二级 3-2'
            }]
          }
         ],
        dialogFormVisible:false,
        currentClickNode:{},
      };
    },
     methods: {
      handleRefresh(cb){
        cb&&cb()
      },
      handleCommand(data){
        this.currentClickNode = data.data
        if(data.action === 'delete'){
          this.remove(data.node,data.data)
        }else if(data.action === 'add'){
          this.dialogFormVisible = true
        }
      },
      confirm(){
        this.append(this.currentClickNode)
        this.dialogFormVisible = false
      },
       append(data) {
        let  id = 530000198610155115
        const newNode = { id: this.form.id, label: this.form.name, children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newNode);
      },
      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
    },
  };
</script>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
<!-- tree-slot.vue -->
```
### ClTree属性说明 
此文档仅展示了基于element-ui的el-tree扩展的属性，cl-tree支持所有el-tree属性和方法，具体使用可查看[element-ui文档](https://element.eleme.cn/2.13/#/zh-CN/component/tree)

|属性|类型|默认值|说明|
|:---         |:---         |:---         |:---      |
|support-filter     |     boolean|    false   |   是否开启过滤  |
|tree-data|     array    |  —  |   展示数据    |
|show-more-button  |   boolean   | false |  是否显示更多操作 |
|props  |   object   | ` {children:'children',label:'label'} ` |  配置选项,具体查看[element-ui文档 ](https://element.eleme.cn/2.13/#/zh-CN/component/tree) |
|height|number/string|0|接受数字或者纯数字的文本，当`height`大于0时会给树一个`{height}px`的固定高度。|

### ClTree事件说明
|事件  |     说明   |     参数     |
|:---  |:---        |:---         |
|refresh|刷新树节点  | cb回调函数   |  

## 树形对话框组件
 ClTreeDialog支持ClTree所有属性和方法

 + 可通过showCheckbox为true设置为多选
 + 多选时若需要只返回叶子节点可设置leafOnly为true,默认为false,只返回包含半选中的叶子节点时可设置includeHalfChecked为true,默认为false。
 - 支持节点过滤通过设置supportFilter为true,默认为false。
```html
<template>
  <div class="cl-tree-dialog">
    <el-row>
      <el-col :span="2">是否多选</el-col>
      <el-col :span="3">
        <el-radio-group v-model="isShowCheckbox">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="4"><el-checkbox  v-model="supportFilter">是否支持过滤</el-checkbox></el-col>
    </el-row>
    <el-row>
      <el-col :span="2">多选时可配置功能</el-col>
      <el-col :span="8">
        <div v-if="isShowCheckbox">
            <el-checkbox v-model="leafOnly">返回叶子节点</el-checkbox>
            <el-checkbox v-model="includeHalfChecked">返回包含半选中节点</el-checkbox>
        </div>
      </el-col>
    </el-row>
    
    <cl-tree-dialog
      ref="clTreeDialog"
      :show-checkbox="isShowCheckbox"
      default-expand-all
      :data="data"
      :props="defaultProps"
      :leaf-only="leafOnly"
      :include-half-checked="includeHalfChecked"
      :support-filter="supportFilter"
      @onConfirm="treeDialogOnConfirm"
    ></cl-tree-dialog>
    <el-button @click="openDialog">打开树形对话框</el-button>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        checkList:[],
        supportFilter:false,
        leafOnly:false,
        includeHalfChecked:false,
        isShowCheckbox:false,
        data: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      };
    },
    mounted(){
      this.getTreeData()
    },
     methods: {
       handleCheckChange(val){
         console.log(val)
       },
      handleNodeClick(data){
       this.$message({ message: "您点击了节点 " + data.name, type: "success" });
      },
      getTreeData() {
        getTreeList()
          .then((res) => {
            this.data = res.data
          })
      },
       treeDialogOnConfirm(nodes) {
        this.$message({
          showClose: true,
          message: JSON.stringify(nodes),
          type: "success"
        });
    },
      openDialog(){
        this.$refs.clTreeDialog.showDialog()
      }
    },
  };
</script>
<style>
  .el-row{
    margin-bottom:20px;
  }
</style>
<!-- tree-dialog.vue -->
```

### 下拉树

```html
<template>
  <el-form v-form>
    <cl-form-item label="权限">
      <el-radio-group v-model="permissionVal">
        <el-radio label="n">无权限</el-radio>
        <el-radio label="r">只读</el-radio>
        <el-radio label="w">编辑</el-radio>
        <el-radio label="b">必填</el-radio>
      </el-radio-group>
    </cl-form-item>
    <cl-form-item label="单选">
      <cl-select-tree
        :ganged="{
          alias: 'xlscx',
          valueBind: 'key',
          noInit: '',
          labelBind: 'value',
          PId: '',
          gangedBind: '{}',
          bind: {},
        }"
        v-model="value1"
        model-name="value1"
        :permission="permissionVal"
      ></cl-select-tree>
    </cl-form-item>
    <cl-form-item label="单选值">
      <cl-input v-model="value1" readonly />
    </cl-form-item>
    <cl-form-item label="多选">
      <cl-select-tree
        :ganged="{
          alias: 'xlscx',
          valueBind: 'key',
          noInit: '',
          labelBind: 'value',
          PId: '',
          gangedBind: '{}',
          bind: {},
        }"
        v-model="value2"
        model-name="value2"
        multiple
        :permission="permissionVal"
      ></cl-select-tree>
    </cl-form-item>
    <cl-form-item label="多选值">
      <cl-input v-model="value2" readonly />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        permissionVal: "w",
        value1: "dog",
        value2: "dog,cat",
      };
    },
  };
</script>

<!-- select-tree.vue -->
```

### ClTreeDialog属性说明

|属性|类型|默认值|说明|
|:---         |:---         |:---         |:---      |
|support-filter     |     boolean|    false   |   是否开启过滤  |
|show-more-button  |   boolean   | false |  是否显示更多操作 |
|data|     array    |  —  |   展示数据    |
|show-checkbox  |   boolean   | false |  是否多选 |
|leaf-only  |   boolean   | false |  是否只返回叶子节点 |
|include-half-checked  |   boolean   | false |  是否只返回包含半选中的叶子节点 |
|dialogTitle     |     string|  请选择     |   弹窗标题  |
|appendToBody     |     boolean|    false   |   Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true  |
|destroy-on-close     |     boolean|    false   |   关闭时销毁 Dialog 中的元素  |
|props  |   object   | ` {children:'children',label:'label'} ` |  配置选项,具体查看[element-ui文档 ](https://element.eleme.cn/2.13/#/zh-CN/component/tree) |


### ClSelectTree属性说明
|属性|类型|默认值|说明|
|:---     |:---         |:---         |:---      |
| v-model | string  |   -   |   绑定值  |
| selectlist | array  |   -   |   静态选项  |
| multiple | boolean  |   -   |   是否支持多选  |
| clearable | boolean  |   -   |   是否支持清空  |
