ThSelectTab选项卡选择器

当选项过多时，使用选项卡展示并选择内容

依赖说明

element-ui

效果预览

基本使用

<template>
  <div>
    <!-- ThSelectTab静态数据 -->
    <th-select-tab v-model="select" :options="treeData" :show-all-levels="false" @visibleChange="visibleChange" @change="selectChange" />

    <!-- ThSelectTab异步加载 -->
    <th-select-tab v-model="select2" :options="treeData" join-chart="~~~" lazy :load="load" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      select: [],
      select2: [],
      treeData: [
        {
          value: '1',
          label: 'label的1',
          children: [
            {
              value: '1-1',
              label: 'label的1-1',
              children: [
                {
                  value: '1-1-1',
                  label: 'label的1-1-1',
                  disabled: true
                },
                {
                  value: '1-1-2',
                  label: 'label的1-1-2'
                },
                {
                  value: '1-1-3',
                  label: 'label的1-1-3'
                },
                {
                  value: '1-1-4',
                  label: 'label的1-1-4'
                }
              ]
            },
            {
              value: '1-2',
              label: 'label的1-2',
              children: [
                {
                  value: '1-2-1',
                  label: 'label的1-2-1'
                },
                {
                  value: '1-2-2',
                  label: 'label的1-2-2',
                  children: [
                    {
                      value: '1-2-2-1',
                      label: 'label的1-2-2-1'
                    },
                    {
                      value: '1-2-2-2',
                      label: 'label的1-2-2-2'
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          value: '2',
          label: 'label的2',
          children: [
            {
              value: '2-1-1',
              label: 'label的2-1-1'
            },
            {
              value: '2-1-2',
              label: 'label的2-1-2'
            },
            {
              value: '2-1-3',
              label: 'label的2-1-3'
            }
          ]
        },
        {
          value: '3',
          label: 'label的3',
          children: [
            {
              value: '3-1-1',
              label: 'label的3-1-1'
            },
            {
              value: '3-1-2',
              label: 'label的3-1-2'
            },
            {
              value: '3-1-3',
              label: 'label的3-1-3'
            }
          ]
        },
        {
          value: '4',
          label: 'label的4',
          children: [
            {
              value: '4-1-1',
              label: 'label的4-1-1'
            },
            {
              value: '4-1-2',
              label: 'label的4-1-2'
            },
            {
              value: '4-1-3',
              label: 'label的4-1-3'
            }
          ]
        }
      ]
    }
  },
  methods: {
    selectChange (val) {
      // 值发生改变
      console.log(val)
    },
    visibleChange (visible) {
      // 选择框显示隐藏
      console.log(visible)
    },
    load(node, resolve) {
      // 此处调用接口返回数据
      setTimeout(() => {
        // resolve([])
        resolve(node.level < 3 ? [{ label: '我是111' + node.level, value: '111' + node.level, children: [] }] : [])
      }, 500)
    }
  }
}
</script>

Attributes

参数	说明	类型	可选	默认值
value	绑定值	array	--	--
options	选项,属性参考下面#options	array	--	--
tabTitle	选项卡默认显示标题	string	--	请选择
size	输入框尺寸	string	medium/small	--
placeholder	占位符	string	--	请选择
width	是否可以清空选项	string	--	请选择
showAllLevels	输入框中是否显示选中值的完整路径	boolean	--	true
joinChart	显示框拼接符号	string	--	-
lazy	是否动态加载子节点，需与 lazyLoad 方法结合使用	boolean	--	false
load	加载动态数据的方法，仅在 lazy 为 true 时有效	function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)	--	--

Options

参数	说明	类型
value	属性值	string / number
label	显示字段	string
children	子集	array

Events

参数	说明	回调参数
change	选中值发生变化时触发	返回{valueArr, textArr},目前的选中值(valueArr),和选中值对应label(textArr)
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false