yf-tree-select（树形下拉选择）

基于element-ui，el-tree-select的二次封装。

使用说明

安装

    npm install yf-tree-select -S

全局引入

    // main.js
    import YfTreeSelect from 'yf-tree-select'
    Vue.use(YfTreeSelect)

组件内引入

    import {YfTreeSelect} from 'yf-tree-select'
    components:{
        YfTreeSelect
    }

预览地址

Example

<template>
  <yf-tree-select
      v-model="selectValue"
      :tree-attrs="treeParams"
  />
</template>
<script>
  import {YfTreeSelect} from 'yf-tree-select'
  const data = [
    {name:'标签一',id:1,age:1},
    {name:'标签二',id:2,age:2},
    {
      name:'标签三',
      id:3,
      age:3,
      children:[
        {name:'标签三-一',id:31,age:31},
        {name:'标签三-二',id:32,age:41},
        {name:'标签三-三',id:33,age:51},
      ]
    },
  ]
  export default {
      components:{
        YfTreeSelect
      },
      data(){
        return {
          selectValue: [],
          treeParams: {
            data,
            filterable: true,
            props:{
              children: "children",
              label: "name",
              value: "id",
            }
          },
        }  
      },
  }
</script>

Attribute

| 参数 | 说明 | 类型 | 默认值 | |:---------------|:--------------------------------------------|:---------------------------|:-------| | v-model | 绑定值 | string/number/array/object | | | selectAttrs | select的属性 | object | 见下表 | | treeAttrs | tree的属性 | object | 见下表 | | customerFilter | 是否自定义过滤(默认标签名过滤)，true配合_treeDataUpdateFun使用 | boolean | false | | foldLabels | 是否折叠labels | boolean | false | | onlyLeaf | 只能选择叶子节点 | boolean | false | | needValueName | 绑定值是否需要返回id和标签名(object) | boolean | false | | placement | 弹出框出现位置(el-popover参数) | string | bottom |

selectAttrs

| 参数 | 说明 | 类型 | 默认值 | |:------------|:------|:--------|:------| | placeholder | 占位符 | string | 请选择 | | disabled | 是否禁用 | boolean | false | | clearable | 是否可清空 | boolean | true |

其他与element-ui一致，可覆盖。 详情el-select

特殊说明

    :popper-append-to-body="false" // 固定false
    :filterable="false" // 固定false 改为弹出中搜索
    multiple // 根据v-model类型判断是否多选 string、number、object单选, array多选
    传入selectAttrs不会影响默认值，除非覆盖
    

treeAttrs

| 参数 | 说明 | 类型 | 默认值 | |:---------------------|:---------------------------------------------------|:--------|:------| | filterable | 是否展示搜索块 | boolean | false | | leafOnly | v-model是否只是叶子节点 | boolean | false | | includeHalfChecked | v-model是否包含半选节点 | boolean | false | | data | 展示数据 | array | | | props | 配置选项 | object | 见下表 |

props

| 参数 | 说明 | 类型 | 默认值 | |:---------|:-------------------------|:-------|:---------| | label | 指定节点标签为节点对象的某个属性值 | string | name | | children | 指定子树为节点对象的某个属性值 | string | children | | value | 指定节点id为节点对象的某个属性值 | string | value | | code | 如果有code，则标签显示为name(code) | string | |

其他与element-ui一致，可覆盖。 详情el-tree

特殊说明

    :show-checkbox="selectAttrs.multiple"  // 使用v-model值类型判断是否对树进行多项，取消对el-tree的人为传参show-checkbox
    :node-key="propsValue"  自动获取treeAttrs.props.value
    :draggable="false"      屏蔽拖动
    传入treeAttrs不会影响默认值，除非覆盖

方法

this.$refs.xxx.method

| 方法名 | 说明 | 参数 | |:--------------------------|:--------|:-------------| | _updatePopoverLocationFun | 更新弹出框位置 | | | _updateH | 更新弹出框宽度 | | | _treeDataUpdateFun | 更新树data | (data)接收一个数组 |

注意事项

    如果数据改变但是树没更新，使用this.$refs.xxx._treeDataUpdateFun手动更新

Events

| 时间名称 | 说明 | 回调参数 | |:-----------------|:----------|:----------------------------------------------------------------| | search-fun | 文本框输入内容触发 | 输入框的值 | | remove-tag | 删除标签触发 | 第一个参数是删除的id，第二个参数是删除的标签名(如果标签名有重复的可能会错，标签唯一才能获取到正确id，可配合code使用) | | select-clear | 清空输入框触发 | | | value-detail | 选中改变触发 | v-model的标签和标签id的数组对象 | | all-detail | 选中改变触发 | v-model的所有属性的数组对象 | | label-ids-detail | 标签改变触发 | 展示标签的数组对象 |