Vue el-selectカスタムパッケージ(インスタンス)

プロジェクトの必要に応じて、element UIに基づいてSelectセレクタを再パッケージし、以下のように記録します.
テンプレートを格納するための新しいvueファイルを作成するとともに、パラメータとメソッドを親コンポーネント呼び出しに使用します.

export default {
  data() {
    return {
      POC: "",
      value2: []
    };
  },
  **props: { options1: Array, placeHolder: String },**
  methods: {
    selectAll() {
      if (this.value2.length < this.options1.length) {
        this.value2 = [];
        this.options1.map(item => {
          this.value2.push(item.value); //  options1  ，  value  value2  
        });
        this.value2.unshift("  ");
      } else {
        this.value2 = [];
      }
    },
    changeSelect(val) {
      if (!val.includes("  ") && val.length === this.options1.length) {
        this.value2.unshift("  ");
      } else if (
        val.includes("  ") &&
        val.length - 1 < this.options1.length
      ) {
        this.value2 = this.value2.filter(item => {
          return item !== "  ";
        });
      }
    },
    removeTag(val) {
      if (val === "  ") {
        this.value2 = [];
      }
    },

    changeValue1: function(callback, vc) {
      console.log("    " + callback);
      if (!callback) {
        if (vc != "") {
          for (var i = 0; i < this.value2.length; i++) {
            if (this.value2[i] === "  ") {
              console.log("   ");
              continue;
            }
            this.POC = this.POC + this.value2[i] + ",";
          }
          console.log(this.POC);
          this.$emit("toPOC", this.POC);
          this.POC = "";
        }
      }
    }
  }
};

使用する場所で参照を追加

import elSelect from "@/components/myComponents/elSelect";

            

componentsに参照を追加してから使用できます.

	component:{
		elSelect 
}

==またはプロジェクトのmain.jsファイルで、グローバルリファレンスを追加==

import elSelect from "@/components/myComponents/elSelect";
Vue.component('elSelect ',elSelect )

親コンポーネントへの参照

//data               

export default {
data() {
	toOptions1:[],
	placeHolder1:"",
		},
//                
methods:{
    getPOCCatalogmodelCode(v) {
      this.toPOC = v;//               
      this.getTableData();  //           
    },
}

}

使用する知識点の紹介

親コンポーネントを子コンポーネントに渡す方法:

サブアセンブリにおいてprops属性で伝達するパラメータを定義する、例えば、上記の

.
props: { options1: Array, placeHolder: String }

親コンポーネントでは、対応する属性名="パラメータ名"を使用して、上記の

のようなパラメータを渡す.
:options1=“toOptions1” :placeHolder=“placeHolder1”

サブアセンブリ親アセンブリにパラメータを渡す方法:

サブアセンブリでthisを使用する.Emit(‘パラメータ名’,パラメータ)は、例えば、上記の

this.$emit(“toPOC”, this.POC);

親構成要素において同じ名前の受信パラメータが使用される場合、前述の

のような@記号が前にあることに注意する.
@toPOC=“getPOCCatalogmodelCode”
メソッド受信パラメータをもう1つ書きます
getPOCCatalogmodelCode(v){this.toPOC=v;//サブコンポーネントを受信するパラメータを指定this.getTable Data();//後続のカスタム機能メソッドを実行}

プルダウンリストの全選と逆選の書き方は、方法が多く、考え方

を重視している.