TreeSelect

Introduction

Used to select from a set of associated data collections.

Single choice mode

item displays the required data for classification. The data format is shown in the example below main-active-index indicates the index of the highlighted option on the left, and active-id indicates the id of the highlighted option on the right.

<z-tree-select 
  v-model:active-id="activeId" 
  v-model:main-active-index="activeIndex" 
  :items="items" 
/>

import { ref } from 'vue'; 
 
export default { 
  setup() { 
    const activeId = ref(1); 
    const activeIndex = ref(0); 
    const items = [ 
      { 
        text: 'Zhejiang', 
        children: [ 
          { text: 'Hangzhou', id: 1 }, 
          { text: 'Wenzhou', id: 2 }, 
          { text: 'Ningbo', id: 3, disabled: true }, 
        ], 
      }, 
      { 
        text: 'Jiangsu', 
        children: [ 
          { text: 'Nanjing', id: 4 }, 
          { text: 'Wuxi', id: 5 }, 
          { text: 'Xuzhou', id: 6 }, 
        ], 
      }, 
      { text: 'Fujian', disabled: true }, 
    ]; 
 
    return { 
      items, 
      activeId, 
      activeIndex, 
    }; 
  }, 
};

Multi-choice mode

When active-id is in array format, multiple options on the right can be selected.

<z-tree-select 
  v-model:active-id="activeIds" 
  v-model:main-active-index="activeIndex" 
  :items="items" 
/>

import { ref } from 'vue'; 
 
export default { 
  setup() { 
    const activeIds = ref([1, 2]); 
    const activeIndex = ref(0); 
    const items = [ 
      { 
        text: 'Zhejiang', 
        children: [ 
          { text: 'Hangzhou', id: 1 }, 
          { text: 'Wenzhou', id: 2 }, 
          { text: 'Ningbo', id: 3, disabled: true }, 
        ], 
      }, 
      { 
        text: 'Jiangsu', 
        children: [ 
          { text: 'Nanjing', id: 4 }, 
          { text: 'Wuxi', id: 5 }, 
          { text: 'Xuzhou', id: 6 }, 
        ], 
      }, 
      { text: 'Fujian', disabled: true }, 
    ]; 
 
    return { 
      items, 
      activeIds, 
      activeIndex, 
    }; 
  }, 
};

Customized Content

The content of the right area can be customized through the content slot.

<z-tree-select 
  v-model:main-active-index="activeIndex" 
  height="300rpx" 
  :items="items" 
> 
    <template #content> 
      <view v-if="activeIndex3 === 0" class="custom-content1"> 
        The currently selected subscript is {{ activeIndex3 }} 
      </view> 
      <view v-if="activeIndex3 === 1" class="custom-content2"> 
        The currently selected subscript is {{ activeIndex3 }} 
      </view> 
    </template> 
</z-tree-select>

import { ref } from 'vue'; 
 
export default { 
  setup() { 
    const activeIndex = ref(0); 
    return { 
      activeIndex, 
      items: [{ text: 'Group 1' }, { text: 'Group 2' }], 
    }; 
  }, 
};

Logo tips

After setting the dot property, a small red dot will be displayed in the upper right corner of the icon; After setting the badge property, the corresponding logo will be displayed in the upper right corner of the icon.

<z-tree-select 
  v-model:main-active-index="activeIndex" 
  :items="items" 
/>

import { ref } from 'vue'; 
 
export default { 
  setup() { 
    const activeIndex = ref(0); 
    return { 
      activeIndex, 
      items: [ 
        { 
          text: 'Zhejiang', 
          children: [ 
            { text: 'Hangzhou', id: 1 }, 
            { text: 'Wenzhou', id: 2 }, 
            { text: 'Ningbo', id: 3, disabled: true }, 
          ], 
          dot: true, 
        }, 
        { 
          text: 'Jiangsu', 
          children: [ 
            { text: 'Nanjing', id: 4 }, 
            { text: 'Wuxi', id: 5 }, 
            { text: 'Xuzhou', id: 6 }, 
          ], 
          badge: 5, 
        }, 
      ], 
    }; 
  }, 
};

Props

Events

Slots

TreeSelectItem data structure

TreeSelectItem is an array containing a series of objects describing categories. In each category, text represents the name of the current category, and children represents the selectable items in the category.

[ 
  { 
    // Navigation name 
    text: 'All cities', 
    // Logo on the upper right corner of the navigation name 
    badge: 3, 
    // Whether to display a red dot on the upper right corner of the navigation name 
    dot: true, 
    // Additional class names for navigation nodes 
    className: 'my-class', 
    // All the options available under this navigation 
    children: [ 
      { 
        // Name 
        text: 'Wenzhou', 
        // id, as an identifier for matching the selected state 
        id: 1, 
        // Disable options 
        disabled: true, 
      }, 
      { 
        text: 'Hangzhou', 
        id: 2, 
      }, 
    ], 
  }, 
];

Style Variables

The component provides the following CSS variables for custom styles. For usage, please refer to the ConfigProvider Component.