Vue-Treeselect コンポーネントの使用 (ドロップダウン ボックス ツリー構造)

序文

• 最近、開発中に入力ボックスにツリーコンポーネントを配置するという問題に遭遇しました。お腹が空いているかどうかを確認したところ、適していないことがわかりました

• 最後に、インターネットで検索したところ、Treeselect という関連コンポーネントが実際に存在することがわかり、確かにそれを説明する関連記事もありましたが、かなり面倒でした。

• ここに記録してください。Treeselect は世界中で使用されています

コード

1. パッケージをダウンロードする

npm install treeselect -S

2. さまざまな場所で使用するグローバル コンポーネントとして登録します。初めて main.js に導入することを忘れないでください (ホームページの記事に記載されています)。

// 输入框树形组件
import Treeselect from '@riophae/vue-treeselect'
export default {
  // install全局引入 vue中一个方法
  // 第1个参数是标签名称，第2个参数是一个选项对象
  install (Vue) {
    // 注册组件
    Vue.component('Treeselect', Treeselect)
  }
}

3. main.jsインポートスタイル

// 下拉框全局组件样式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

4. ページ構造 - deptID によってバインドされる値

<treeselect
          style="width: 220px;"
          v-model="deptID"
          :options="deptOptions"
          :normalizer="normalizer"
          placeholder="选择维保班组"
   />

5. データ データ

data() {
    return {
      // 绑定值
      deptID:null,
      // 树结构选择数据
      deptOptions: []
    }
}

6.methods メソッド - ツリー構造の構成に相当

methods:{
  // 树结构格式配置-跟element Tree树结构配置项一样
      normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
}

---

要約:

このプロセスを経て、Vue-Treeselect コンポーネント (ドロップダウン ボックス ツリー構造) の使い方についても予備的な印象が深まったと思いますが、実際の開発で遭遇する状況は明らかに異なるため、それを理解する必要があります。いつも同じです。さあ、労働者を殴ってください！

不備があればご指摘ください、ありがとうございます -- Fengguowuhen