Vue Element フロントエンドアプリケーション開発 従来の Element インターフェースコンポーネント

<el-ダイアログ
  title="ヒント"
  :visible.sync="ダイアログを表示"
  幅="30%"
  :before-close="ハンドルを閉じる">
  <span>これはメッセージです</span>
  <span slot="フッター" class="ダイアログフッター">
    <el-button @click="dialogVisible = false">キャンセル</el-button>
    <el-button type="primary" @click="dialogVisible = false">OK</el-button>
  </span>
</el-ダイアログ>

表示ビュー(id) {
      var パラメータ = { id: id }
      GetProductDetail(param).then(データ => {
        オブジェクトにデータを割り当てます。
      })
      this.isView = true
    },

<el-テーブル
  v-loading="リスト読み込み中"
  :data="製品リスト"
  国境
  フィット
  ストライプ
  現在の行をハイライト
  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
  @selection-change="選択変更"
  @row-dblclick="rowDbclick"
>

rowDbclick(行、列) {
      var id = 行.ID
      id を表示します。
    },

<el-form ref="viewForm" :model="viewForm" label-width="80px">

 <el-form-item label="製品番号">
   <el-input v-model="editForm.ProductNo" />
 </el-form-item>

<el-フォーム項目
    prop="メール"
    label="メールボックス"
    :ルール="[
      { 必須: true、メッセージ: 'メールアドレスを入力してください'、トリガー: 'blur' },
      { type: 'email'、message: '有効なメールアドレスを入力してください'、trigger: ['blur'、'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

<el-行>
  <el-col :span="12">
    <el-form-item label="製品番号">
      <el-input v-model="editForm.ProductNo" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="バーコード">
      <el-input v-model="editForm.BarCode" />
    </el-form-item>
  </el-col>
</el-row>

<el-form-item label="製品タイプ">
  <el-select v-model="editForm.ProductType" filterable="" placeholder="選択してください">
    <el-オプション
      v-for="(item, key) in typeList"
      :key="キー"
      :label="アイテム.値"
      :value="アイテムキー"
    />
  </el-select>
</el-form-item>

作成された() {
    // 辞書などをバインドするための製品タイプを取得します。GetProductType().then(data => {
      if (データ) {
        データ.forEach(アイテム => {
          this.productTypes.set(アイテムID、アイテム名)
          this.typeList.push({ キー: item.id, 値: item.name })
        })

        // リスト情報を取得する this.getlist()
      }
    });
  },

<el-tab-pane label="説明" name="2番目">
    <el-form-item label="説明">
      <el-input v-model="editForm.Description" type="textarea" :rows="10" />
    </el-form-item>
  </el-tab-pane>

 <el-tab-pane label="詳細">
    <el-form-item label="詳細な説明">
      <div class="border-radius" v-html="viewForm.Note" />
    </el-form-item>
  </el-tab-pane>

<el-tab-pane label="画像情報">
    <el-form-item label="カバー画像">
      <el-image
        スタイル="幅: 100px; 高さ: 100px"
        :src="viewForm.Picture"
        :preview-src-list="[viewForm.Picture]"
      />
    </el-form-item>
    <el-form-item label="バナー画像">
      <el-image
        スタイル="幅: 100px; 高さ: 100px"
        :src="viewForm.バナー"
        :preview-src-list="[viewForm.Banner]"
      />
    </el-form-item>
    <el-form-item label="商品表示画像">
      <el-image
        v-for="viewForm.pics 内の項目"
        :key="アイテムキー"
        クラス="境界半径"
        :src="アイテムの写真"
        スタイル="幅: 100px; 高さ: 100px; パディング: 10px"
        :preview-src-list="getPreviewPics()"
      />
    </el-form-item>
  </el-tab-pane>

プレビュー画像を取得する() {
      // ViewForm.pics 内の pic コレクションを変換します var list = []
      if (this.viewForm.pics) {
        this.viewForm.pics.forEach(item => {
          if (item.pic) {
            リスト.push(item.pic)
          }
        })
      }
      返品リスト
    }

npm インストール @chenfengyuan/vue-barcode vue

npm インストール @chenfengyuan/vue-qrcode vue

// バーコード、QRコードをインポート
'@chenfengyuan/vue-barcode' から VueBarcode をインポートします。
'@chenfengyuan/vue-qrcode' から VueQrcode をインポートします。
Vue.component(VueBarcode.name, VueBarcode);

<el-tab-pane label="詳細な説明" name="3番目">
    <el-form-item label="詳細な説明">
      <tinymce v-model="editForm.Note" :height="300" />
    </el-form-item>
  </el-tab-pane>

<テンプレート>
  <el-select v-model="svalue" filterable clearable placeholder="選択してください">
    <el-オプション
      v-for="(item, index) in dictItems"
      :key="インデックス"
      :label="item.テキスト"
      :value="アイテムの値"
    />
  </el-select>
</テンプレート>

<スクリプト>
// API モジュールクラスメソッドをインポートします import { GetDictData } from '@/api/dictdata'

エクスポートデフォルト{
  name: 'MyDictdata', // コンポーネント名 props: {
    typeName: { // 辞書型、バックエンド辞書インターフェースからデータを取得 type: String,
      デフォルト： ''
    },
    オプション:{// 固定リストモード、直接バインディングタイプ: 配列、
      デフォルト: () => { return [] }
    }
  },
  データ（） {
    戻る {
      dictItems: [], // 辞書リストを設定 svalue: '' // 選択した値 }
  },
  時計：
    // ドロップダウンボックスの値が変更されたかどうかを判定する svalue(val, oldVal) {
      if (val !== oldVal) {
        this.$emit('input', this.svalue);
      }
    }
  },
  マウント() {
    var that = this;

    if (this.typeName && this.typeName !== '') {
      // 辞書型を使用してサーバーからデータを要求します GetDictData(this.typeName).then(data => {
        if (データ) {
          データ.forEach(アイテム => {
            if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
              that.dictItems.push(アイテム)
            }
          });
        }
      })
    } それ以外の場合 (this.options && this.options.length > 0) {
      // 固定の辞書リストを使用する this.options.forEach(item => {
        if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
          that.dictItems.push(アイテム)
        }
      });
    }
    // デフォルト値を設定します。this.svalue = this.value;
  },
  メソッド: {

  }
}
</スクリプト>

'@/components/Common/my-dictdata' から myDictdata をインポートします。

エクスポートデフォルト{
  コンポーネント: { myDictdata },

<el-select v-model="searchForm.ProductType" filterable clearable placeholder="選択してください">
  <el-オプション
    v-for="(item, key) in typeList"
    :key="キー"
    :label="アイテム.値"
    :value="アイテムキー"
  />
</el-select>

<my-dictdata v-model="searchForm.ProductType" type-name="製品タイプ" />

<my-dictdata v-model="searchForm.Status" :options="ステータス" />

状態： [
    { テキスト: 'Normal'、値: 0 },
    { テキスト: '推奨'、値: 1 },
    { テキスト: '無効'、値: 2 }
  ]