el-select ドロップダウン複数選択ボックス el-select デフォルト値の設定は削除できません

16445826:

Element3.0+vue3.0 el-select ドロップダウン複数選択ボックス el-select set デフォルト値は削除できない機能

Element-UI は広く使用されている Vue.js コンポーネント ライブラリであり、その中でも El-Select ドロップダウン複数選択ボックス コンポーネントは実際のプロジェクト開発でよく使用されます。ただし、Element 3.0 バージョンでは、El-Select ドロップダウン複数選択ボックスのデフォルト値が削除される可能性があるため、予期しない状況が発生する可能性があります。この記事では、この問題を解決し、El-Select ドロップダウン複数選択ボックスのデフォルト値が削除できない機能を実現する方法を紹介します。

シーン

製品スクリーニング ページを開発しているとします。製品ステータスの複数選択フィルター条件には、デフォルト状態の製品を選択するために使用される「デフォルト」オプションがあります。少なくとも 1 つの状態が選択されていることを確認するために、ユーザーが「デフォルト」オプションを選択解除できないようにしたいと考えています。

機能的解析

• まず、el-selectではこの機能はサポートされておらず、せいぜいel-optionのdisabled属性を禁止する程度です
  。
  
• したがって、コードを変更して、 el-option disabled が true の場合に select-tag-close-none プロパティを none に
  設定する必要があります。

実際の戦闘ではmian.jsに以下のコードを入れるだけです。

亿点小知识：vue3.0中是 app.directive 在 vue2.0中是 Vue
vue3.0では

app.directive("defaultSelect", {
    
    
  componentUpdated(el, bindings) {
    
    
    const [values, options, prop, defaultProp, defaultValue] = bindings.value;
    
    const indexs = [];
    const tempData = values.map(item => options.find(op => op[prop] === item));
    
    tempData.forEach((item, index) => {
      if (item[defaultProp] === defaultValue) {
        indexs.push(index);
      }
    });
    
    const dealStyle = function(tags) {
      tags.forEach((el, index) => {
        if (indexs.includes(index) && ![...el.classList].includes("select-tag-close-none")) {
    
    
          el.classList.add("none");
        }
      });
    };
    
    const tags = el.querySelectorAll(".el-tag__close");
    
    if (tags.length === 0) {
    
    
      setTimeout(() => {
    
    
        const tagTemp = el.querySelectorAll(".el-tag__close");
        dealStyle(tagTemp);
      });
    } else {
    
    
      dealStyle(tags);
    }
  }
});

上記は el-select ドロップダウンの複数選択ボックスです。el-select はデフォルト値を設定しており、削除できません。読んでいただきありがとうございます。他の問題が発生した場合は、プライベートで私と話し合って勉強することができます
。
参考になりましたので点赞ブックマークしてください、ありがとうございます〜！
お気に入りのブロガーに注目して、更新を続けます...