zylTreeSelect - 树状选择器组件

用途

可用于拓展 el-select 没有树状结构选择的场景。

基础用法

复制代码

<template>
  <div>
    <p>单选：{{ deptId }}</p>
    <zyl-tree-select
      v-model="deptId"
      clearable
      default-expand-all
      highlight-current
      :expand-on-click-node="false"
      placeholder="请选择部门"
      style="width: 150px;"
      :treeData="treeData"
      :defaultProps="{
        children: 'children',
        label: 'label',
        value: 'id'
      }"
    />
    <p>多选：{{ deptId2 }}</p>
    <zyl-tree-select
      v-model="deptId2"
      clearable
      multiple
      check-on-click-node
      default-expand-all
      :expand-on-click-node="false"
      placeholder="请选择部门"
      style="width: 150px;"
      :treeData="treeData"
      :defaultProps="{
        children: 'children',
        label: 'label',
        value: 'id'
      }"
    />
    <p>
      通过
      <strong>checkLeafOnly</strong>
      属性仅返回被选中的叶子节点的 keys：{{ deptId3 }}
    </p>
    <zyl-tree-select
      v-model="deptId3"
      clearable
      multiple
      check-on-click-node
      default-expand-all
      :expand-on-click-node="false"
      checkLeafOnly
      placeholder="请选择部门"
      style="width: 150px;"
      :treeData="treeData"
      :defaultProps="{
        children: 'children',
        label: 'label',
        value: 'id'
      }"
    />
    <p>
      通过
      <strong>filterable</strong>
      属性启用关键字检索功能
    </p>
    <zyl-tree-select
      v-model="deptId4"
      clearable
      filterable
      default-expand-all
      highlight-current
      :expand-on-click-node="false"
      placeholder="请输入关键字搜索并选择部门"
      style="width: 250px;"
      :treeData="treeData"
      :defaultProps="{
        children: 'children',
        label: 'label',
        value: 'id'
      }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      deptId: '',
      deptId2: [],
      deptId3: [],
      deptId4: '',
      treeData: [
        {
          id: 1,
          label: '前端部门',
          children: [
            {
              id: 2,
              label: '前端部门-1',
              children: [
                {
                  id: 3,
                  label: '前端部门-1-1',
                  children: [
                    { id: 8, label: '前端部门-1-1-1' },
                    { id: 9, label: '前端部门-1-1-2' }
                  ]
                },
                { id: 4, label: '前端部门-1-2' }
              ]
            }
          ]
        },
        {
          id: 5,
          label: '后端部门',
          children: [
            { id: 6, label: '后端部门-1' },
            { id: 7, label: '后端部门-2' }
          ]
        }
      ]
    }
  },
  methods: {}
}
</script>

显示代码

该组件新增和替换的属性/事件/方法在以下表格，除树状组件必要的参数data 、props 、node-key 、show-checkbox、default-checked-keys 被占用外，其余参数全部继承自 el-tree (opens new window) 和 el-select (opens new window) ，可自行查阅按照原方法使用。

属性

事件

方法

请在该组件绑定 ref 后通过 this.$refs.组件绑定ref的名称.$refs.treeSelect.方法名() 进行 el-select 方法的使用 或 this.$refs.组件绑定ref的名称.$refs.nodeTree.方法名() 进行 el-tree 方法的使用。