🌳 TreeSelect カテゴリ選択 - 階層が明確な選択体験！

🎯 カテゴリ選択の専門家：複雑な階層データの選択を簡単かつ直感的にし、左右に分割されたデザインでユーザーが一目了然！

✨ TreeSelect とは？

TreeSelect は階層データ用に特別設計された選択コンポーネントで、スマートなファイルマネージャーのように、左側にカテゴリナビゲーション、右側に具体的なオプションを表示します。都市の選択、商品カテゴリ、組織構造など、どんなシーンでも簡単に対応できます！

🎯 主な特徴：

🏗️ 階層が明確：左右に分割されたデザインで、階層がはっきりとわかる
🎨 操作性が良い：単一選択、複数選択モードをサポート
🔍 素早く見つける：左側のナビゲーションでカテゴリをすばやく切り替え
🎭 高度なカスタマイズ：バッジ、無効化、カスタムコンテンツをサポート

📦 コンポーネントの導入

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネント登録を参照してください。

import { createApp } from 'vue';
import { TreeSelect } from 'vant';

const app = createApp();
app.use(TreeSelect);

🚀 コードデモ

🎯 単一選択モード

最も基本的な単一選択モードで、都市の選択や商品カテゴリなどのシーンに適しています。左側のナビゲーションでカテゴリをすばやく切り替え、右側で具体的なオプションを選択します：

html

<van-tree-select
  v-model:active-id="activeId"
  v-model:main-active-index="activeIndex"
  :items="items"
  @click-nav="onClickNav"
  @click-item="onClickItem"
/>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const activeId = ref(1);
    const activeIndex = ref(0);
    
    // 🏙️ 都市データ構造
    const items = [
      {
        text: '浙江省',
        children: [
          { text: '杭州市', id: 1 },
          { text: '温州市', id: 2 },
          { text: '宁波市', id: 3, disabled: true }, // 🚫 オプションを無効化
        ],
      },
      {
        text: '江苏省',
        children: [
          { text: '南京市', id: 4 },
          { text: '无锡市', id: 5 },
          { text: '徐州市', id: 6 },
        ],
      },
      {
        text: '福建省',
        disabled: true, // 🚫 カテゴリ全体を無効化
      },
    ];

    // 🎯 ナビゲーションクリックイベント
    const onClickNav = (index) => {
      showToast(`カテゴリを切り替え: ${items[index].text}`);
    };

    // 🎯 オプションクリックイベント
    const onClickItem = (item) => {
      showToast(`選択: ${item.text}`);
    };

    return {
      items,
      activeId,
      activeIndex,
      onClickNav,
      onClickItem,
    };
  },
};

🎨 複数選択モード

複数のオプションを同時に選択でき、複数都市への配送、複数カテゴリのフィルタリングなどのシーンに適しています：

html

<van-tree-select
  v-model:active-id="activeIds"
  v-model:main-active-index="activeIndex"
  :items="items"
  :max="3"
  @click-item="onClickItem"
/>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const activeIds = ref([1, 2]); // 🎯 配列形式で複数選択をサポート
    const activeIndex = ref(0);
    
    // 🏪 商品カテゴリデータ
    const items = [
      {
        text: 'デジタル製品',
        children: [
          { text: 'スマートフォン', id: 1 },
          { text: 'タブレット', id: 2 },
          { text: 'ノートパソコン', id: 3, disabled: true },
        ],
      },
      {
        text: '家電製品',
        children: [
          { text: 'テレビ', id: 4 },
          { text: '洗濯機', id: 5 },
          { text: '冷蔵庫', id: 6 },
        ],
      },
      {
        text: '服と靴',
        disabled: true,
      },
    ];

    // 🎯 オプションクリックイベント
    const onClickItem = (item) => {
      const isSelected = activeIds.value.includes(item.id);
      const action = isSelected ? '選択を解除' : '選択';
      showToast(`${action}: ${item.text}`);
    };

    return {
      items,
      activeIds,
      activeIndex,
      onClickItem,
    };
  },
};

🎭 カスタムコンテンツ

content スロットを使用すると、右側の領域の内容を完全にカスタマイズできます。複雑な情報、グラフ、またはその他のコンポーネントを表示するのに適しています：

html

<van-tree-select
  v-model:main-active-index="activeIndex"
  :items="items"
  height="300px"
>
  <template #content>
        <div class="custom-content">
          <div class="content-header">
            <h3>🎨 カスタムコンテンツ領域</h3>
            <p>現在の選択: {{ items[activeIndex]?.text }}</p>
          </div>
          
          <div class="content-body">
            <van-cell-group>
              <van-cell title="📊 データ統計" value="詳細を見る" is-link />
              <van-cell title="📈 トレンド分析" value="レポートを見る" is-link />
              <van-cell title="⚙️ 設定管理" value="設定に入る" is-link />
            </van-cell-group>
          </div>
          
          <div class="content-footer">
            <van-button type="primary" block>
              {{ items[activeIndex]?.text }} を選択確定
            </van-button>
          </div>
        </div>
      </template>
</van-tree-select>

import { ref } from 'vue';

export default {
  setup() {
    const activeIndex = ref(0);
    
    // 🎯 機能グループデータ
    const items = [
      { text: '📊 データ分析' },
      { text: '👥 ユーザー管理' },
      { text: '⚙️ システム設定' },
      { text: '📱 モバイル端末' },
    ];

    return {
      activeIndex,
      items,
    };
  },
};

css

/* カスタムコンテンツのスタイル */
.custom-content {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-header {
  margin-bottom: 16px;
}

.content-header h3 {
  margin: 0 0 8px 0;
  color: #323233;
}

.content-header p {
  margin: 0;
  color: #969799;
  font-size: 14px;
}

.content-body {
  flex: 1;
  margin-bottom: 16px;
}

.content-footer {
  margin-top: auto;
}

🏷️ バッジ表示

dot と badge 属性を使用して、カテゴリに情報を追加表示し、ユーザーが各カテゴリの状態をすばやく理解できるようにします：

html

<van-tree-select
  v-model:active-id="activeId"
  v-model:main-active-index="activeIndex"
  :items="items"
  @click-item="onClickItem"
/>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const activeId = ref(1);
    const activeIndex = ref(0);
    
    // 🏷️ バッジ付きカテゴリデータ
    const items = [
      {
        text: '人気都市',
        dot: true, // 🔴 赤い点を表示
        children: [
          { text: '北京市', id: 1 },
          { text: '上海市', id: 2 },
          { text: '深圳市', id: 3 },
        ],
      },
      {
        text: 'おすすめ都市',
        badge: 5, // 🏷️ 数字バッジを表示
        children: [
          { text: '杭州市', id: 4 },
          { text: '南京市', id: 5 },
          { text: '苏州市', id: 6 },
        ],
      },
      {
        text: 'その他の都市',
        badge: 'NEW', // 🆕 テキストバッジを表示
        children: [
          { text: '成都市', id: 7 },
          { text: '重庆市', id: 8 },
          { text: '西安市', id: 9 },
        ],
      },
    ];

    // 🎯 オプションクリックイベント
    const onClickItem = (item) => {
      showToast(`選択: ${item.text}`);
    };

    return {
      activeId,
      activeIndex,
      items,
      onClickItem,
    };
  },
};

📚 API リファレンス

⚙️ Props

パラメータ	説明	タイプ	デフォルト値
v-model:main-active-index 🎯	左側の選択済みアイテムのインデックス - 現在アクティブなカテゴリを制御	number \| string	`0`
v-model:active-id 🎨	右側の選択済みアイテムのID - 単一選択(数字)と複数選択(配列)をサポート	number \| string \| (number \| string)[]	`0`
items 📋	カテゴリ表示に必要なデータ - ツリー構造のオプションデータ	TreeSelectItem[]	`[]`
height 📏	コンポーネントの高さ - デフォルトはpx単位、パーセンテージもサポート	number \| string	`300`
max 🔢	右側のアイテムの最大選択数 - 複数選択モードの制限	number \| string	`Infinity`
selected-icon ✅	右側のバーで選択状態のアイコンをカスタマイズ - 個性化された選択マーク	string	`success`

🎯 Events

イベント名	説明	コールバックパラメータ
click-nav 🧭	左側のナビゲーションをクリックしたときにトリガーされる - カテゴリ切り替えイベント	index: number
click-item 🎯	右側の選択アイテムをクリックしたときにトリガーされる - オプション選択イベント	item: TreeSelectChild

🎭 Slots

名前	説明	パラメータ
nav-text 📝	ナビゲーション名をカスタマイズ - 左側のカテゴリ表示を個性化 `v4.1.0`	item: TreeSelectChild
content 🎨	右側の領域の内容をカスタマイズ - 右側の表示領域を完全にカスタマイズ	-

🏗️ TreeSelectItem データ構造

TreeSelectItem 全体は配列で、配列内にカテゴリを記述する一連のオブジェクトが含まれています。各カテゴリでは、text が現在のカテゴリの名前を示し、children がカテゴリ内のオプションを示します。

[
  {
    // ナビゲーション名
    text: 'すべての都市',
    // ナビゲーション名の右上にバッジを表示
    badge: 3,
    // ナビゲーション名の右上に赤い点を表示するかどうか
    dot: true,
    // ナビゲーションノードの追加クラス名
    className: 'my-class',
    // このナビゲーションの下のすべてのオプション
    children: [
      {
        // 名前
        text: '温州',
        // ID、選択状態を一致させるための識別子
        id: 1,
        // オプションを無効化
        disabled: true,
      },
      {
        text: '杭州',
        id: 2,
      },
    ],
  },
];

キー名	説明	タイプ
text 📝	ナビゲーション名 - 左側のカテゴリに表示されるテキスト	string
children 👶	このナビゲーションの下のオプションデータ - 右側のオプションリスト	TreeSelectChild[]
className 🎨	対応するナビゲーションに追加のCSSクラス名を追加 - カスタムスタイル	string
dot 🔴	ナビゲーションの右上に赤い点を表示するかどうか - 注意マーク	boolean
badge 🏷️	ナビゲーションの右上に表示されるバッジの数字またはテキスト - 数提示	number \| string
disabled 🚫	このナビゲーションを無効にするかどうか - クリック不可の状態	boolean

🧩 TreeSelectChild データ構造

キー名	説明	タイプ
id 🆔	このオプションの一意の識別子 - 選択状態の管理に使用	number \| string
text 📝	オプションのテキスト - 右側のオプションに表示される内容	string
disabled 🚫	このオプションを無効にするかどうか - 選択不可の状態	boolean

🔧 型定義

コンポーネントは以下の型定義をエクスポートします：

import type { TreeSelectItem, TreeSelectChild, TreeSelectProps } from 'vant';

🎨 テーマカスタマイズ

🎭 スタイル変数

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネントを参照してください。

名称	デフォルト値	説明
--van-tree-select-font-size 📝	var(--van-font-size-md)	フォントサイズ
--van-tree-select-nav-background 🎨	var(--van-background)	左側ナビゲーションの背景色
--van-tree-select-content-background 🖼️	var(--van-background-2)	右側コンテンツの背景色
--van-tree-select-nav-item-padding 📏	14px var(--van-padding-sm)	ナビゲーションアイテムのパディング
--van-tree-select-item-height 📐	48px	オプションの高さ
--van-tree-select-item-active-color 🎯	var(--van-primary-color)	アクティブ状態の色
--van-tree-select-item-disabled-color 🚫	var(--van-gray-5)	無効状態の色
--van-tree-select-item-selected-size ✅	16px	選択アイコンのサイズ

📖 関連ドキュメント

🎯 セレクターコンポーネント

Picker 選択器 - マルチカラムセレクター、カスケード選択をサポート
DatePicker 日付選択器 - 日付時間選択コンポーネント
Cascader カスケード選択 - カスケードセレクター、複数階層のデータ構造をサポート

📋 リストコンポーネント

List リスト - カスケードスクロールロード、長いリストの表示に使用
Cell セル - リスト内の単一の表示項目

🎨 ディスプレイコンポーネント

Badge バッジ - 右上隅にバッジ番号または赤い点を表示
Tag タグ - キーワードのマーキングや主なコンテンツの要約に使用
Empty 空状態 - 空状態のプレースホルダー

🔧 ツールコンポーネント

ConfigProvider グローバル設定 - コンポーネントのグローバル設定に使用
Locale 国際化 - 複数言語テキストの処理に使用

🌳 TreeSelect カテゴリ選択 - 階層が明確な選択体験！ ​

✨ TreeSelect とは？ ​

📦 コンポーネントの導入 ​

🚀 コードデモ ​

🎯 単一選択モード ​

🎨 複数選択モード ​

🎭 カスタムコンテンツ ​

🏷️ バッジ表示 ​

📚 API リファレンス ​

⚙️ Props ​

🎯 Events ​

🎭 Slots ​

🏗️ TreeSelectItem データ構造 ​

🧩 TreeSelectChild データ構造 ​

🔧 型定義 ​

🎨 テーマカスタマイズ ​

🎭 スタイル変数 ​

📖 関連ドキュメント ​

🎯 セレクターコンポーネント ​

📋 リストコンポーネント ​

🎨 ディスプレイコンポーネント ​

🔧 ツールコンポーネント ​

🌳 TreeSelect カテゴリ選択 - 階層が明確な選択体験！

✨ TreeSelect とは？

📦 コンポーネントの導入

🚀 コードデモ

🎯 単一選択モード

🎨 複数選択モード

🎭 カスタムコンテンツ

🏷️ バッジ表示

📚 API リファレンス

⚙️ Props

🎯 Events

🎭 Slots

🏗️ TreeSelectItem データ構造

🧩 TreeSelectChild データ構造

🔧 型定義

🎨 テーマカスタマイズ

🎭 スタイル変数

📖 関連ドキュメント

🎯 セレクターコンポーネント

📋 リストコンポーネント

🎨 ディスプレイコンポーネント

🔧 ツールコンポーネント