カスケードセレクターの使用

element-ui でのカスケードセレクターの使用は、主にドロップダウンボックスの選択に適しており、使用頻度は比較的高いです。

まず、element-ui でカスケードセレクターのコンテンツを見つけます。

ここでは、最下層だけを選択できるのではなく、各項目を選択できるようにしたいので、1レベルのオプションを選択します。

展開する、それだけです

公式ウェブサイトのデモがどのようなものかを見てみましょう

html:

<template>
  <div class="example-block">
    <span class="example-demonstration"
      >Select any level of options (Single selection)</span
    >
    <el-cascader :options="options" :props="props1" clearable />
  </div>
</template>

脚本：

const props1 = {
  checkStrictly: true,
}

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
]

スクリプトのデータ要件は次のとおりです。階層関係、親と子の間の関係は子に関連付けられており、バックエンドからフロントエンドに渡されるコード形式も子形式である必要があります。

options は対応するデータ項目であり、props1 はその構成オプションです

props の内容に従って、これら 2 つの属性について話しましょう

labelはカスケードセレクターに表示される各選択に対応する名前であり、value は名前の背後にある対応する値として理解できます。

場合：

部門の情報を追加する必要があります。すべての部門を表示する必要がありますが、親部門のparentIdが追加されます。つまり、バインドされたフィールドは親部門のフィールドで、各部門の名前はnameです。各部門の値はidです。

次に、カスケードセレクターは次のように書く必要があります

 <el-form-item label="上级部门" prop='id'>
             <div class="example-block">
               <el-cascader
                 :options="alldept"
                 :props="props"
                 v-model='form1.parentId'
               />
             </div>
      </el-form-item>

v-model 双方向バインディングの内容は、対応する送信フォームの内容であるparentIdであり、options は対応する内容です。ここでは alldept です。

   const props = {
      expandTrigger: 'hover',
      label:'name',
      value:'id',
      emitPath:false,
      checkStrictly: true // 只选择选中的节点
      }

ここで、value は対応する値 ID、label は表示されるコンテンツの名前、その他のドキュメントを知ることができます。

checkStrictly は注意が必要で、レベルが多い場合や、最終的に選択されているノードの内容を取得したい場合、他のノードの内容が表示されない場合には、checkStrictly: true にする必要があります。後段のデータ転送時にデータフォーマットエラーが発生する可能性があります。

カスケードセレクターの使用

おすすめ