Vue Element フロントエンドアプリケーション開発テーブルリスト表示

1. リストクエリインターフェースの効果

コード処理ロジックを紹介する前に、まずは感覚的に理解し、レンダリングを掲載した上で、処理手順と注意事項を一つずつ紹介していきましょう。

従来のリスト表示インターフェースは、一般的にいくつかの領域に分かれています。1 つはクエリ領域、1 つはリスト表示領域、もう 1 つは下部のページングコンポーネント領域です。クエリ領域は主に共通条件のレイアウトに使用され、インポート、エクスポート、追加、一括追加、一括削除などのボタンなど、いくつかのグローバルまたはバッチ操作が追加されています。メインリスト表示領域は比較的複雑で、さまざまなデータをよりユーザーフレンドリーに表示する必要があります。タグ、アイコン、ボタン、その他のインターフェイス要素と組み合わせて表示できます。リストには通常、表示、編集、削除など、単一行レコードを処理するためのいくつかの操作が含まれています。一括削除の場合は、上部のボタン領域に配置できます。

2. クエリ領域の処理

クエリ領域の一般的なインターフェース効果を以下に示します。よく使用されるクエリ条件に加えて、クエリ、リセット、追加、一括削除、インポート、エクスポートなどの一般的な処理ボタンも追加されています。

クエリ領域もフォーム処理なので、フォームデータを運ぶための対応するオブジェクトも追加する必要があります。次のコードに示すように、データ内のクエリをページングするための searchForm モデルオブジェクトと pageinfo オブジェクトを追加します。

エクスポートデフォルト{
  データ（） {
    戻る {
      リスト読み込み: true、
      ページ情報: {
        ページインデックス: 1,
        ページサイズ: 10,
        合計: 0
      },
      検索フォーム: {
        商品番号: '',
        バーコード: ''、
        製品タイプ: ''、
        製品名: ''、
        ステータス: 0
      },

ビューテンプレートコードは次のとおりです。

<el-form ref="検索フォーム" :model="検索フォーム" label-width="80px">
      <el-行>
        <el-col :span="6">
          <el-form-item label="製品番号。" prop="製品番号">
            <el-input v-model="searchForm.ProductNo" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="製品名" prop="製品名">
            <el-input v-model="searchForm.ProductName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="製品タイプ" prop="製品タイプ">
            <el-select v-model="searchForm.ProductType" filterable clearable placeholder="選択してください">
              <el-オプション
                v-for="(item, key) in typeList"
                :key="キー"
                :label="アイテム.値"
                :value="アイテムキー"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="ステータス" prop="ステータス">
            <el-select v-model="searchForm.Status" filterable clearable placeholder="選択してください">
              <el-オプション
                v-for="ステータス内のアイテム"
                :key="item.値"
                :label="item.テキスト"
                :value="アイテムの値"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="float:right;padding-bottom:10px">
      <el-button icon="el-icon-search" type="primary" round @click="search()">検索</el-button>
      <el-button icon="el-icon-refresh-left" type="warning" round plain @click="resetForm('searchForm')">リセット</el-button>
      <el-button icon="el-icon-document-add" type="success" round @click="showAdd()">追加</el-button>
      <el-button icon="el-icon-document-remove" type="danger" round @click="BatchDelete()">一括削除</el-button>
      <el-button icon="el-icon-upload2" type="danger" plain="" round @click="showImport()">インポート</el-button>
    </el-row>

製品タイプはドロップダウンリストです。データ領域でオブジェクトを取得し、それをトラバースして辞書コンテンツを表示します。時間がかかれば、これらのドロップダウンリストを通常の処理モードに従って統合し、辞書コンポーネントを定義して実装することができます。ドロップダウンリストをバインドするには、辞書タイプの Prop 値を割り当てるだけです。これについては後で詳しく説明します。

Vue のスクリプト処理ロジックでは、Created 宣言サイクルで API 経由でデータを取得し、モデルにバインドすると、インターフェースが自動的に更新されます。処理コードを以下に示します。

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

    // リスト情報を取得する this.getlist()
  },
  メソッド: {
    取得リスト() {
      // 通常のページングクエリ条件を構築 var param = {
        タイプ: this.producttype === 'all' ? '' : this.producttype,
        ページインデックス: this.pageinfo.pageindex、
        ページサイズ: this.pageinfo.pagesize
      };

      // SearchForm 条件を param に追加し、クエリを送信します。 param.type = this.searchForm.ProductType // 対応する属性に変換します。 Object.assign(param, this.searchForm);

      // 製品リストを取得し、モデルにバインドしてページ数を変更します this.listLoading = true
      GetProductList(param).then(データ => {
        this.productlist = データリスト
        this.pageinfo.total = データ.total_count
        this.listLoading = false
      })
    },

Object.assign(param, this.searchForm); ステートメントは、取得したクエリ条件で元のオブジェクトのプロパティを上書きし、クエリ条件の変数割り当てを実装するために使用されます。

リストデータの取得は、テーブルリストデータを表示する方法を紹介するプロセスです。テーブルインターフェースの効果は次のとおりです。

まず、HTML の <table> タグに似たテーブルヘッダーを定義し、次のコードに示すように、スタイルといくつかの一般的な操作関数を指定します。

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

具体的なプロパティについては、テーブルコントロールに関する Element コンポーネントのプロパティを参照してください。テーブル列では、主にデータバインディングに焦点を当てています。

次に、バッチ削除操作などのバッチ処理用のチェックボックス選択の列を定義します。

 <el-table-column type="selection" width="55"/>

次のステップでは、以下に示すように、返された JSON 属性に従ってコンテンツを 1 つずつテーブル列に変換します。

<el-table-column label="製品番号" width="80">
<テンプレート スロット スコープ="スコープ">
  {{ スコープ.行.製品番号 }}
</テンプレート>
</el-table-column>

表示に処理効果を追加する必要がある場合、通常はテンプレートで表示効果を変更できます。以下は、ユニットの処理であり、強調するためにタグマークが追加されています。

<el-table-column align="center" label="単位" width="80">
<テンプレート スロット スコープ="スコープ">
  <el-tag type="" effect="plain"> {{ scope.row.Unit }}</el-tag>
</テンプレート>
</el-table-column>

判定と処理が必要な一部のエフェクトについては、以下のステータスのように内容を判定して出力することができます。

 <el-table-column label="ステータス" width="80">
    <テンプレート スロット スコープ="スコープ">
      <el-tag v-if="scope.row.Status==0" type="" effect="dark">通常</el-tag>
      <el-tag v-else-if="scope.row.Status==1" type="success" effect="dark">推奨</el-tag>
      <el-tag v-else-if="scope.row.Status==2" type="danger" effect="dark">無効にする</el-tag>
    </テンプレート>
  </el-table-column>

さらに、一般的な日付処理では、Formatter、Filter などの手段を使用してコンテンツをエスケープし、末尾の時刻部分を削除できます。

<el-table-column align="center" label="作成日" width="120" prop="CreateTime" :formatter="dateFormat" />

dataFormat はエスケープ関数であり、関数コードは次のようになります。

dateFormat(行、列、セル値) {
      cellValue を返します? fecha.format(new Date(cellValue), 'yyyy-MM-dd'): ''
    },

使用する際は、上部にクラスライブラリを導入する必要があります

'element-ui/lib/utils/date' から fecha として * をインポートします。

辞書のエスケープが必要な操作の場合、対応する値を中国語の情報に解析する関数を追加するなど、Formatter を使用してエスケープできます。

効果はFormatterを使ってエスケープできる

productTypeFormat(行、列、セル値) {
      var display = this.productTypes.get(セル値)
      表示を返す || ''
    },

処理にはフィルターモードを使用することもできます。

ここでは、フィルターを使用した操作処理を紹介します。まず、次のコードに示すように、インターフェイスの HTML コードに該当する操作を追加します。

<el-table-column align="center" label="製品タイプ" width="120" prop="製品タイプ">
    <テンプレート スロット スコープ="スコープ">
      <el-tag type="danger"> {{ scope.row.ProductType | productTypeFilter }}</el-tag>
    </テンプレート>
  </el-table-column>

フィルターは実際には | フィルターシンボルで、その後にフィルター関数が続きます。

エクスポートデフォルト{
  フィルター:
    productTypeFilter: 関数(値) {
      if (!value) が '' を返す

      var display = that.productTypes.get(値)
      表示を返す || ''
    }
  },

フィルター自体はエスケープのためにデータ内の属性リストを参照できないことに注意してください。必要な場合は、次のコードに示すように、beforeCreate のフック関数にこれへの参照を記録する必要があります。

操作ボタンの場合、複数のボタンを表示するために 1 行を追加するだけで済みます。権限制御が必要な場合は、権限セットに基づいて操作可能な権限を決定できます。

<el-table-column label="操作" width="140">
        <テンプレートスコープ="スコープ">
          <el-行>
            <el-tooltip effect="light" content="表示" placement="top-start">
              <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.ID)" />
            </el-tooltip>
            <el-tooltip effect="light" content="編集" placement="top-start">
              <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.ID)" />
            </el-tooltip>
            <el-tooltip effect="light" content="削除" placement="top-start">
              <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.ID)" />
            </el-tooltip>
          </el-row>
        </テンプレート>
      </el-table-column>

ここで、showView/showEdit/ShowDelete は主にポップアップレイヤーの前にいくつかの処理操作を実行します。どの操作を表示する必要があるかを決定するために、データ項目にいくつかの変数を定義します。

isAdd: false、
isEdit: false、
isView: false、
isImport: false、

たとえば、編集操作の場合、API 処理クラスを使用してバックエンドデータを取得し、それを編集ボックスのフォームオブジェクトに割り当てて表示する必要があります。

表示編集(id) {
  // APIクラスを使用してIDパラメータを介してデータを取得した後、それを表示用のオブジェクトに割り当てます var param = { id: id }
  GetProductDetail(param).then(データ => {
    オブジェクトにデータを割り当てます。
  })
  this.isEdit = true
},

表示処理では、各行ボタンをクリックして指定された行レコードを表示するだけでなく、指定された行をダブルクリックして、対応する表示レコードインターフェイスをポップアップ表示することもできます。

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

これはテーブル定義内のいくつかの処理イベントです

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

各ダイアログボックスの :visible プロパティ値によって、どのモーダルダイアログボックスが表示されるか、または非表示になるかが決まります。

削除操作に関しては、確認してリモート処理に送信し、通常の結果を返し、削除が成功したことをユーザーに通知するだけです。ロジックコードを以下に示します。

表示削除(id) {
      this.$confirm('選択したレコードを削除してもよろしいですか?', '操作プロンプト',
        {
          タイプ: 'warning' // 成功、エラー、情報、警告
          // 確認ボタンテキスト: 'OK',
          // キャンセルボタンテキスト: 'キャンセル'
        }
      ).then(() => {
        // 削除操作処理コード this.$message({
          タイプ: '成功'、
          メッセージ: '正常に削除されました!'
        });
      }).catch(() => {
        this.$メッセージ({
          タイプ: '情報'、
          メッセージ: '削除されました'
        });
      });
    },

上記は、通常のテーブルリストページのクエリ、リストの表示、フィールドのエスケープ、および追加、編集、表示、削除操作のいくつかの一般的な処理に関する一般的な操作です。これらのモデルを操作することで、過去に対応するDOMを再取得するという面倒な操作が軽減され、データの操作と処理がはるかに便利になります。

以上がVue Elementフロントエンドアプリケーション開発のテーブルリスト表示の詳細な内容です。Vue Elementの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません: