idss-select-tree 下拉选择树

说明

• 此组件是有 el-select 和 el-tree 组件结合而成，由于这两个组件的扩展性都比较强，所以在组件设计中保留了组件本身的所有配置项
• 分别通过属性 select 和 tree 类配置
• 传送门：el-select 配置项，el-tree 配置项

基础单选

<!-- 数据结构仅作为参照，具体结构视情况而定 -->
<idss-select-tree
  :data="originData"
  v-model="selection3"
  :select="{
    clearable: true
  }"
  :tree="{
    'highlight-current': true
  }">
</idss-select-tree>
<script>
  export default {
    data () {
      return {
        selection3: ''
      }
    }
  }
</script>

如下图:

基础多选

适用性较广的基础多选，用 Tag 展示已选项

<!-- 数据结构仅作为参照，具体结构视情况而定 -->
<idss-select-tree
  :data="originData"
  v-model="selection"
  :select="{
    multiple: true,
    'collapse-tags': true
  }"
  :tree="{
    'show-checkbox': true,
    'default-expanded-keys': selection
  }">
</idss-select-tree>
<script>
  export default {
    data () {
      return {
        selection: []
      }
    }
  }
</script>

如下图:

自定义树节点

在 slot 为 node 内添加自定义节点，或者使用 render-content 的方式，示例略

<!-- 数据结构仅作为参照，具体结构视情况而定 -->
<idss-select-tree style="width: 400px;"
  :data="customTree"
  v-model="selection3"
  :select="{
    multiple: false,
    clearable: true
  }"
  :tree="{
    'show-checkbox': false,
    'highlight-current': true
  }">
  <span style="display: inline-block; padding-left: 10px;">
    <el-button type="text" size="mini" @click="() => append('root')">添加根节点</el-button>
  </span>
  <span slot="node" slot-scope="{ node, data }">
    <span>{{ node.label }}</span>
    <span>
      <el-button
        type="text"
        size="mini"
        @click.stop="() => append(data)">
        添加
      </el-button>
      <el-button
        type="text"
        size="mini"
        @click.stop="() => remove(node, data)">
        删除
      </el-button>
    </span>
  </span>
</idss-select-tree>
<script>
  export default {
    data () {
      return {
        selection3: '',
        key: 444
      }
    },
    methods: {
      append(data) {
        let key = this.key++
        const newChild = { key: key + '', label: 'testtest', children: [] };
        if (data === 'root') {
          // 根节点
          this.customTree.push(newChild)
        } else {
          // 普通节点
          if (!data.children) {
            this.$set(data, 'children', [])
          }
          data.children.push(newChild)
        }
      },
      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.key === data.key);
        children.splice(index, 1);
      }
    }
  }
</script>

如下图:

树节点过滤

通过关键字过滤树节点

<!-- 数据结构仅作为参照，具体结构视情况而定 -->
<!-- 获取树的 DOM 元素方法： this.$refs['filterTree'].$refs['tree'] -->
<idss-select-tree style="width: 400px;"
  ref="filterTree"
  :data="customTree"
  v-model="selection3"
  :select="{
    multiple: false,
    clearable: true
  }"
  :tree="{
    'show-checkbox': false,
    'highlight-current': true,
    'filter-node-method': filterNode
  }">
  <div style="padding: 10px;">
    <el-input size="small"
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
  </div>
</idss-select-tree>
<script>
  export default {
    watch: {
      filterText(val) {
        this.$refs['filterTree'].$refs['tree'].filter(val)
      }
    },
    data () {
      return {
        filterText: '',
        selection3: ''
      }
    },
    methods: {
      filterNode (value, data) {
        console.log('filterNode: ', value)
        if (!value) return true
        return data.label.indexOf(value) !== -1
      }
    }
  }
</script>

如下图:

props

参数	说明	类型	可选值	默认值
value / v-model	绑定值	array, string, number	---	---
data	树的展示数据	array	---	---
placeholder	默认显示内容	string	---	请选择
props	配置选项，具体查看 el-tree 配置项	object	---	---
node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	string	---	key
select	el-select 相关配置项修改	object	el-select 配置项	{'popper-append-to-body': false}
tree	el-tree 相关配置项修改	object	el-tree 配置项	{'expand-on-click-node': false}

Events

直接绑定即可，参照 el-select/el-tree 官方事件，例： @node-click="handleNodeClick"

yarn 和npm使用

//npm
npm i v-select-tree
//yarn
yarn add v-select-tree

import Vue from 'vue'
import vSelectTree from 'v-select-tree'

Vue.use(vSelectTree)