TTreeSelect 下拉树形结构组件

---

单选

• 一级 1菈妮

  二级 1-1

  三级 1-1-1

  一级 2

  二级 2-1

  三级 2-1-1

  二级 2-2

  三级 2-2-1鸡腿

无数据

在组件中需配置：
defaultData 默认值显示；类型Object且必须是{id:,label:*}
@handleNodeClick 获取当前选中项；类型Object

<template>
  <t-tree-select
    :options="treeList"
    placeholder="请选择tree结构"
    width="50%"
    :defaultData="defaultValue"
    :treeProps="treeProps"
    @handleNodeClick="selectDrop"
  />
</template>
<script>
export default {
  name: 'TTreeSelectDemo',
  data() {
    return {
      defaultValue: { id: '1', label: '一级 1菈妮' },
      treeProps: {
        value: 'id',
        children: 'children',
        label: 'name'
      },
      treeList: [
        {
          id: '1',
          name: '一级 1菈妮',
          children: [
            {
              id: '1-1',
              name: '二级 1-1',
              children: [
                {
                  id: '1-1-1',
                  name: '三级 1-1-1',
                },
              ],
            },
          ],
        },
        {
          name: '一级 2',
          id: '2',
          children: [
            {
              id: '2-1',
              name: '二级 2-1',
              children: [
                {
                  id: '2-1-1',
                  name: '三级 2-1-1',
                },
              ],
            },
            {
              id: '2-2',
              name: '二级 2-2',
              children: [
                {
                  id: '2-2-1',
                  name: '三级 2-2-1鸡腿'
                },
              ],
            },
          ],
        },
      ]
    }
  },
  methods: {
    selectDrop(val) {
      console.log('选中---->', val)
    }
  }
}
</script>

显示代码

wocwin微信二维码

多选

• 一级 1菈妮

  二级 1-1

  三级 1-1-1

  一级 2

  二级 2-1

  三级 2-1-1

  二级 2-2

  三级 2-2-1鸡腿

无数据

在组件中需配置：
multiple 开启多选
defaultValue 默认值显示；类型Array
@handleNodeClick 获取当前选中项集合；类型Array

<template>
  <t-tree-select
    :options="treeList"
    placeholder="请选择tree多选结构"
    width="50%"
    :defaultValue="defaultValue"
    :treeProps="treeProps"
    @handleNodeClick="selectDrop"
    multiple
  />
</template>
<script>
export default {
  name: 'TTreeSelectDemo',
  data() {
    return {
      defaultValue: ['1', '2'], // 默认值
      treeProps: {
        value: 'id',
        children: 'children',
        label: 'name'
      },
      treeList: [
        {
          id: '1',
          name: '一级 1菈妮',
          children: [
            {
              id: '1-1',
              name: '二级 1-1',
              children: [
                {
                  id: '1-1-1',
                  name: '三级 1-1-1',
                },
              ],
            },
          ],
        },
        {
          name: '一级 2',
          id: '2',
          children: [
            {
              id: '2-1',
              name: '二级 2-1',
              children: [
                {
                  id: '2-1-1',
                  name: '三级 2-1-1',
                },
              ],
            },
            {
              id: '2-2',
              name: '二级 2-2',
              children: [
                {
                  id: '2-2-1',
                  name: '三级 2-2-1鸡腿'
                },
              ],
            },
          ],
        },
      ]
    }
  },
  methods: {
    selectDrop(val) {
      console.log('选中---->', val)
    }
  }
}
</script>

显示代码

wocwin微信二维码

t-tree-select——下拉树形结构组件

代码示例：

<t-tree-select
  :options="treeList"
  placeholder="请选择tree结构"
  width="50%"
  :defaultData="defaultValue"
  :treeProps="treeProps"
  @handleNodeClick="selectDrop"
/>

配置参数（Attributes）继承 el-select 和 el-tree Attributes

参数	说明	类型	默认值
options	tree 原始数据源	Array	无
treeProps	tree 配置	Object	el-tree props 默认值一样
checkBoxBtn	是否显示全选、反选、清空操作(多选的情况下)	Boolean	true
multiple	是否开启多选	Boolean	false
width	选择宽度（可以设置 px 或者%）	String	100%
defaultData	单选默认值	Object	{}
defaultValue	多选默认值	Array	[]

继承 el-select 和 el-tree events

事件名	说明	返回值
handleNodeClick	选中 tree 节点	单选传出当前选择项；多选传出选中的集合。